Merge pull request #20642 from storybookjs/vite/type-cleanup

Vite: TypeScript type cleanup

MIGRATION.md

@@ -20,6 +20,7 @@
     - [Webpack4 support discontinued](#webpack4-support-discontinued)
     - [Framework field mandatory](#framework-field-mandatory)
     - [frameworkOptions renamed](#frameworkoptions-renamed)
+    - [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved)
     - [Framework standalone build moved](#framework-standalone-build-moved)
     - [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -573,6 +574,23 @@ module.exports = {
 };
 ```
 
+#### TypeScript: StorybookConfig type moved
+
+If you are using TypeScript you should import the `StorybookConfig` type from your framework package.
+
+For example:
+
+```ts
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  framework: '@storybook/react-vite',
+  // ... your configuration
+};
+
+export default config;
+```
+
 #### Framework standalone build moved
 
 In 7.0 the location of the standalone node API has moved to `@storybook/core-server`.
@@ -747,7 +765,6 @@ If user code in `.storybook/preview.js` or stories relies on "sloppy" mode behav
 
 Earlier versions of Storybook used Webpack DLLs as a performance crutch. In 6.1, we've removed Storybook's built-in DLLs and have deprecated the command-line parameters `--no-dll` and `--ui-dll`. In 7.0 those options are removed.
 
-
 ### Docs Changes
 
 The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.

code/frameworks/html-vite/src/index.ts

@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';

code/frameworks/html-vite/src/preset.ts

@@ -1,6 +1,7 @@
-import type { StorybookConfig } from '@storybook/builder-vite';
+import type { PresetProperty } from '@storybook/types';
+import type { StorybookConfig } from './types';
 
-export const core: StorybookConfig['core'] = {
+export const core: PresetProperty<'core', StorybookConfig> = {
   builder: '@storybook/builder-vite',
   renderer: '@storybook/html',
 };

code/frameworks/html-vite/src/types.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+
+type FrameworkName = '@storybook/html-vite';
+type BuilderName = '@storybook/builder-vite';
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  core?: StorybookConfigBase['core'] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName;
+          options: BuilderOptions;
+        };
+  };
+};
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework;

code/frameworks/preact-vite/src/index.ts

@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';

code/frameworks/preact-vite/src/preset.ts

@@ -1,8 +1,9 @@
-import type { StorybookConfig } from '@storybook/builder-vite';
 import { hasVitePlugins } from '@storybook/builder-vite';
+import type { PresetProperty } from '@storybook/types';
 import preact from '@preact/preset-vite';
+import type { StorybookConfig } from './types';
 
-export const core: StorybookConfig['core'] = {
+export const core: PresetProperty<'core', StorybookConfig> = {
   builder: '@storybook/builder-vite',
   renderer: '@storybook/preact',
 };

code/frameworks/preact-vite/src/types.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+
+type FrameworkName = '@storybook/preact-vite';
+type BuilderName = '@storybook/builder-vite';
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  core?: StorybookConfigBase['core'] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName;
+          options: BuilderOptions;
+        };
+  };
+};
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework;

code/frameworks/react-vite/src/index.ts

@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';

code/frameworks/react-vite/src/preset.ts

@@ -1,8 +1,9 @@
 /* eslint-disable global-require */
-import type { StorybookConfig } from '@storybook/builder-vite';
+import type { PresetProperty } from '@storybook/types';
 import { hasVitePlugins } from '@storybook/builder-vite';
+import type { StorybookConfig } from './types';
 
-export const core: StorybookConfig['core'] = {
+export const core: PresetProperty<'core', StorybookConfig> = {
   builder: '@storybook/builder-vite',
   renderer: '@storybook/react',
 };

code/frameworks/react-vite/src/types.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+
+type FrameworkName = '@storybook/react-vite';
+type BuilderName = '@storybook/builder-vite';
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  core?: StorybookConfigBase['core'] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName;
+          options: BuilderOptions;
+        };
+  };
+};
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework;

code/frameworks/svelte-vite/src/index.ts

@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';

code/frameworks/svelte-vite/src/preset.ts

@@ -1,8 +1,10 @@
-import { type StorybookConfig, hasVitePlugins } from '@storybook/builder-vite';
+import { hasVitePlugins } from '@storybook/builder-vite';
+import type { PresetProperty } from '@storybook/types';
+import type { StorybookConfig } from './types';
 import { handleSvelteKit } from './utils';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
-export const core: StorybookConfig['core'] = {
+export const core: PresetProperty<'core', StorybookConfig> = {
   builder: '@storybook/builder-vite',
   renderer: '@storybook/svelte',
 };

code/frameworks/svelte-vite/src/types.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+
+type FrameworkName = '@storybook/svelte-vite';
+type BuilderName = '@storybook/builder-vite';
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  core?: StorybookConfigBase['core'] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName;
+          options: BuilderOptions;
+        };
+  };
+};
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework;

code/frameworks/sveltekit/src/index.ts

@@ -1 +1 @@
-export * from '@storybook/svelte-vite';
+export * from './types';

code/frameworks/sveltekit/src/preset.ts

@@ -1,9 +1,10 @@
-import { type StorybookConfig } from '@storybook/svelte-vite';
 // @ts-expect-error -- TS picks up the type from preset.js instead of dist/preset.d.ts
 import { viteFinal as svelteViteFinal } from '@storybook/svelte-vite/preset';
+import type { PresetProperty } from '@storybook/types';
 import { withoutVitePlugins } from '@storybook/builder-vite';
+import { type StorybookConfig } from './types';
 
-export const core: StorybookConfig['core'] = {
+export const core: PresetProperty<'core', StorybookConfig> = {
   builder: '@storybook/builder-vite',
   renderer: '@storybook/svelte',
 };

code/frameworks/sveltekit/src/types.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+
+type FrameworkName = '@storybook/sveltekit';
+type BuilderName = '@storybook/builder-vite';
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  core?: StorybookConfigBase['core'] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName;
+          options: BuilderOptions;
+        };
+  };
+};
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework;

code/frameworks/vue-vite/src/index.ts

@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';

code/frameworks/vue-vite/src/preset.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import type { PresetProperty } from '@storybook/types';
-import type { StorybookConfig } from '@storybook/builder-vite';
+import type { StorybookConfig } from './types';
 import { vueDocgen } from './plugins/vue-docgen';
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -11,7 +11,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
     builder: {
       name: path.dirname(
         require.resolve(path.join('@storybook/builder-vite', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      ) as '@storybook/builder-vite',
       options: typeof framework === 'string' ? {} : framework?.options.builder || {},
     },
     renderer: '@storybook/vue',

code/frameworks/vue-vite/src/types.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+
+type FrameworkName = '@storybook/vue-vite';
+type BuilderName = '@storybook/builder-vite';
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  core?: StorybookConfigBase['core'] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName;
+          options: BuilderOptions;
+        };
+  };
+};
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework;

code/frameworks/vue3-vite/src/index.ts

@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';

code/frameworks/vue3-vite/src/preset.ts

@@ -1,8 +1,9 @@
-import type { StorybookConfig } from '@storybook/builder-vite';
 import { hasVitePlugins } from '@storybook/builder-vite';
+import type { PresetProperty } from '@storybook/types';
+import type { StorybookConfig } from './types';
 import { vueDocgen } from './plugins/vue-docgen';
 
-export const core: StorybookConfig['core'] = {
+export const core: PresetProperty<'core', StorybookConfig> = {
   builder: '@storybook/builder-vite',
   renderer: '@storybook/vue3',
 };