From 36232e7d05f303a96912c75cd627dd550fe78347 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Mon, 16 Jan 2023 20:50:53 -0500
Subject: [PATCH 1/6] Move types into types.ts

---
 code/lib/builder-vite/src/index.ts            | 26 +++----------------
 code/lib/builder-vite/src/types.ts            | 25 ++++++++++++++++++
 .../src/types/extended-options.type.ts        |  8 ------
 code/lib/builder-vite/src/types/index.ts      |  1 -
 4 files changed, 29 insertions(+), 31 deletions(-)
 create mode 100644 code/lib/builder-vite/src/types.ts
 delete mode 100644 code/lib/builder-vite/src/types/extended-options.type.ts
 delete mode 100644 code/lib/builder-vite/src/types/index.ts

diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts
index b9535c4a5e08..8e1e7b573ae1 100644
--- a/code/lib/builder-vite/src/index.ts
+++ b/code/lib/builder-vite/src/index.ts
@@ -1,37 +1,19 @@
 // noinspection JSUnusedGlobalSymbols
 
 import * as fs from 'fs-extra';
-import type { Builder, StorybookConfig as StorybookBaseConfig, Options } from '@storybook/types';
 import type { RequestHandler } from 'express';
-import type { InlineConfig, UserConfig, ViteDevServer } from 'vite';
+import type { ViteDevServer } from 'vite';
 import express from 'express';
 import { dirname, join, parse } from 'path';
 import { transformIframeHtml } from './transform-iframe-html';
 import { createViteServer } from './vite-server';
 import { build as viteBuild } from './build';
-import type { ExtendedOptions } from './types';
+import type { ExtendedOptions, ViteBuilder } from './types';
 
 export { withoutVitePlugins } from './utils/without-vite-plugins';
 export { hasVitePlugins } from './utils/has-vite-plugins';
 
-// TODO remove
-export type { TypescriptOptions } from '@storybook/types';
-
-// Storybook's Stats are optional Webpack related property
-export type ViteStats = {
-  toJson: () => any;
-};
-
-export type ViteBuilder = Builder<UserConfig, ViteStats>;
-
-export type ViteFinal = (
-  config: InlineConfig,
-  options: Options
-) => InlineConfig | Promise<InlineConfig>;
-
-export type StorybookConfig = StorybookBaseConfig & {
-  viteFinal?: ViteFinal;
-};
+export type { ViteFinal } from './types';
 
 /**
  * @deprecated
@@ -40,7 +22,7 @@ export type StorybookConfig = StorybookBaseConfig & {
  *
  * Or better yet, import from your framework.
  */
-export type StorybookViteConfig = StorybookConfig;
+export type { StorybookViteConfig } from './types';
 
 function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): RequestHandler {
   return async (req, res, next) => {
diff --git a/code/lib/builder-vite/src/types.ts b/code/lib/builder-vite/src/types.ts
new file mode 100644
index 000000000000..e7f09c08c14c
--- /dev/null
+++ b/code/lib/builder-vite/src/types.ts
@@ -0,0 +1,25 @@
+import type { Builder, StorybookConfig as StorybookBaseConfig, Options } from '@storybook/types';
+import type { InlineConfig, UserConfig } from 'vite';
+
+// Storybook's Stats are optional Webpack related property
+type ViteStats = {
+  toJson: () => any;
+};
+
+export type ViteBuilder = Builder<UserConfig, ViteStats>;
+
+export type ViteFinal = (
+  config: InlineConfig,
+  options: Options
+) => InlineConfig | Promise<InlineConfig>;
+
+export type StorybookViteConfig = StorybookBaseConfig & {
+  viteFinal?: ViteFinal;
+};
+
+// Using instead of `Record<string, string>` to provide better aware of used options
+type IframeOptions = {
+  title: string;
+};
+
+export type ExtendedOptions = Options & IframeOptions;
diff --git a/code/lib/builder-vite/src/types/extended-options.type.ts b/code/lib/builder-vite/src/types/extended-options.type.ts
deleted file mode 100644
index eaad5a8cc86c..000000000000
--- a/code/lib/builder-vite/src/types/extended-options.type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Options } from '@storybook/types';
-
-// Using instead of `Record<string, string>` to provide better aware of used options
-type IframeOptions = {
-  title: string;
-};
-
-export type ExtendedOptions = Options & IframeOptions;
diff --git a/code/lib/builder-vite/src/types/index.ts b/code/lib/builder-vite/src/types/index.ts
deleted file mode 100644
index 937f58679fe6..000000000000
--- a/code/lib/builder-vite/src/types/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './extended-options.type';

From 0663100b12981c7c6c3a47c1817575106648e019 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Mon, 16 Jan 2023 21:46:52 -0500
Subject: [PATCH 2/6] Improve types in Vite frameworks

---
 code/frameworks/html-vite/src/index.ts        |  2 +-
 code/frameworks/html-vite/src/types.ts        | 36 +++++++++++++++++++
 code/frameworks/preact-vite/src/index.ts      |  2 +-
 code/frameworks/preact-vite/src/types.ts      | 36 +++++++++++++++++++
 code/frameworks/react-vite/src/index.ts       |  2 +-
 code/frameworks/react-vite/src/types.ts       | 36 +++++++++++++++++++
 code/frameworks/svelte-vite/src/index.ts      |  2 +-
 code/frameworks/svelte-vite/src/types.ts      | 36 +++++++++++++++++++
 code/frameworks/sveltekit/src/index.ts        |  2 +-
 code/frameworks/sveltekit/src/types.ts        | 36 +++++++++++++++++++
 code/frameworks/vue-vite/src/index.ts         |  2 +-
 code/frameworks/vue-vite/src/types.ts         | 36 +++++++++++++++++++
 code/frameworks/vue3-vite/src/index.ts        |  2 +-
 code/frameworks/vue3-vite/src/types.ts        | 36 +++++++++++++++++++
 .../web-components-vite/src/index.ts          |  2 +-
 .../web-components-vite/src/types.ts          | 36 +++++++++++++++++++
 code/lib/builder-vite/src/index.ts            | 11 +++---
 code/lib/builder-vite/src/types.ts            |  6 ++--
 18 files changed, 306 insertions(+), 15 deletions(-)
 create mode 100644 code/frameworks/html-vite/src/types.ts
 create mode 100644 code/frameworks/preact-vite/src/types.ts
 create mode 100644 code/frameworks/react-vite/src/types.ts
 create mode 100644 code/frameworks/svelte-vite/src/types.ts
 create mode 100644 code/frameworks/sveltekit/src/types.ts
 create mode 100644 code/frameworks/vue-vite/src/types.ts
 create mode 100644 code/frameworks/vue3-vite/src/types.ts
 create mode 100644 code/frameworks/web-components-vite/src/types.ts

diff --git a/code/frameworks/html-vite/src/index.ts b/code/frameworks/html-vite/src/index.ts
index d3ded0cdbbb9..fcb073fefcd6 100644
--- a/code/frameworks/html-vite/src/index.ts
+++ b/code/frameworks/html-vite/src/index.ts
@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';
diff --git a/code/frameworks/html-vite/src/types.ts b/code/frameworks/html-vite/src/types.ts
new file mode 100644
index 000000000000..6c424c983077
--- /dev/null
+++ b/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?: {
+    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;
diff --git a/code/frameworks/preact-vite/src/index.ts b/code/frameworks/preact-vite/src/index.ts
index d3ded0cdbbb9..fcb073fefcd6 100644
--- a/code/frameworks/preact-vite/src/index.ts
+++ b/code/frameworks/preact-vite/src/index.ts
@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';
diff --git a/code/frameworks/preact-vite/src/types.ts b/code/frameworks/preact-vite/src/types.ts
new file mode 100644
index 000000000000..bba1e821e4c8
--- /dev/null
+++ b/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?: {
+    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;
diff --git a/code/frameworks/react-vite/src/index.ts b/code/frameworks/react-vite/src/index.ts
index d3ded0cdbbb9..fcb073fefcd6 100644
--- a/code/frameworks/react-vite/src/index.ts
+++ b/code/frameworks/react-vite/src/index.ts
@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';
diff --git a/code/frameworks/react-vite/src/types.ts b/code/frameworks/react-vite/src/types.ts
new file mode 100644
index 000000000000..b368009f9d75
--- /dev/null
+++ b/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?: {
+    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;
diff --git a/code/frameworks/svelte-vite/src/index.ts b/code/frameworks/svelte-vite/src/index.ts
index d3ded0cdbbb9..fcb073fefcd6 100644
--- a/code/frameworks/svelte-vite/src/index.ts
+++ b/code/frameworks/svelte-vite/src/index.ts
@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';
diff --git a/code/frameworks/svelte-vite/src/types.ts b/code/frameworks/svelte-vite/src/types.ts
new file mode 100644
index 000000000000..fdf93ab7b700
--- /dev/null
+++ b/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?: {
+    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;
diff --git a/code/frameworks/sveltekit/src/index.ts b/code/frameworks/sveltekit/src/index.ts
index 1a8d7c1a6e62..fcb073fefcd6 100644
--- a/code/frameworks/sveltekit/src/index.ts
+++ b/code/frameworks/sveltekit/src/index.ts
@@ -1 +1 @@
-export * from '@storybook/svelte-vite';
+export * from './types';
diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts
new file mode 100644
index 000000000000..bfb6094ce317
--- /dev/null
+++ b/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?: {
+    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;
diff --git a/code/frameworks/vue-vite/src/index.ts b/code/frameworks/vue-vite/src/index.ts
index d3ded0cdbbb9..fcb073fefcd6 100644
--- a/code/frameworks/vue-vite/src/index.ts
+++ b/code/frameworks/vue-vite/src/index.ts
@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';
diff --git a/code/frameworks/vue-vite/src/types.ts b/code/frameworks/vue-vite/src/types.ts
new file mode 100644
index 000000000000..6b72ade8db41
--- /dev/null
+++ b/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?: {
+    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;
diff --git a/code/frameworks/vue3-vite/src/index.ts b/code/frameworks/vue3-vite/src/index.ts
index d3ded0cdbbb9..fcb073fefcd6 100644
--- a/code/frameworks/vue3-vite/src/index.ts
+++ b/code/frameworks/vue3-vite/src/index.ts
@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';
diff --git a/code/frameworks/vue3-vite/src/types.ts b/code/frameworks/vue3-vite/src/types.ts
new file mode 100644
index 000000000000..2780a44425cc
--- /dev/null
+++ b/code/frameworks/vue3-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/vue3-vite';
+type BuilderName = '@storybook/builder-vite';
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  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;
diff --git a/code/frameworks/web-components-vite/src/index.ts b/code/frameworks/web-components-vite/src/index.ts
index d3ded0cdbbb9..fcb073fefcd6 100644
--- a/code/frameworks/web-components-vite/src/index.ts
+++ b/code/frameworks/web-components-vite/src/index.ts
@@ -1 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
+export * from './types';
diff --git a/code/frameworks/web-components-vite/src/types.ts b/code/frameworks/web-components-vite/src/types.ts
new file mode 100644
index 000000000000..a4a2cacbdf95
--- /dev/null
+++ b/code/frameworks/web-components-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/web-components-vite';
+type BuilderName = '@storybook/builder-vite';
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  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;
diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts
index 8e1e7b573ae1..0ff1fc5f34cd 100644
--- a/code/lib/builder-vite/src/index.ts
+++ b/code/lib/builder-vite/src/index.ts
@@ -5,24 +5,25 @@ import type { RequestHandler } from 'express';
 import type { ViteDevServer } from 'vite';
 import express from 'express';
 import { dirname, join, parse } from 'path';
+import type { StorybookConfig as StorybookBaseConfig } from '@storybook/types';
 import { transformIframeHtml } from './transform-iframe-html';
 import { createViteServer } from './vite-server';
 import { build as viteBuild } from './build';
-import type { ExtendedOptions, ViteBuilder } from './types';
+import type { ExtendedOptions, ViteBuilder, StorybookConfigVite } from './types';
 
 export { withoutVitePlugins } from './utils/without-vite-plugins';
 export { hasVitePlugins } from './utils/has-vite-plugins';
 
-export type { ViteFinal } from './types';
+export * from './types';
 
 /**
  * @deprecated
  *
- * Use `import { StorybookConfig } from '@storybook/builder-vite';`
+ * Import `StorybookConfig` from your framework, such as:
  *
- * Or better yet, import from your framework.
+ * `import type { StorybookConfig } from '@storybook/react-vite';`
  */
-export type { StorybookViteConfig } from './types';
+export type StorybookViteConfig = StorybookBaseConfig & StorybookConfigVite;
 
 function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): RequestHandler {
   return async (req, res, next) => {
diff --git a/code/lib/builder-vite/src/types.ts b/code/lib/builder-vite/src/types.ts
index e7f09c08c14c..1792044dd586 100644
--- a/code/lib/builder-vite/src/types.ts
+++ b/code/lib/builder-vite/src/types.ts
@@ -1,5 +1,5 @@
-import type { Builder, StorybookConfig as StorybookBaseConfig, Options } from '@storybook/types';
 import type { InlineConfig, UserConfig } from 'vite';
+import type { Builder, Options } from '@storybook/types';
 
 // Storybook's Stats are optional Webpack related property
 type ViteStats = {
@@ -13,10 +13,12 @@ export type ViteFinal = (
   options: Options
 ) => InlineConfig | Promise<InlineConfig>;
 
-export type StorybookViteConfig = StorybookBaseConfig & {
+export type StorybookConfigVite = {
   viteFinal?: ViteFinal;
 };
 
+export type BuilderOptions = {};
+
 // Using instead of `Record<string, string>` to provide better aware of used options
 type IframeOptions = {
   title: string;

From 678c06c7c594150d9ff7ce8fb7901b23405af6ac Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Mon, 16 Jan 2023 22:09:58 -0500
Subject: [PATCH 3/6] Replace ExtendedOptions with standard Options type

---
 code/lib/builder-vite/input/iframe.html              |  2 +-
 code/lib/builder-vite/src/build.ts                   |  4 ++--
 code/lib/builder-vite/src/codegen-entries.ts         |  3 +--
 code/lib/builder-vite/src/codegen-iframe-script.ts   |  5 ++---
 .../builder-vite/src/codegen-modern-iframe-script.ts |  5 ++---
 code/lib/builder-vite/src/envs.ts                    |  5 ++---
 code/lib/builder-vite/src/index.ts                   | 12 ++++++------
 code/lib/builder-vite/src/optimizeDeps.ts            |  5 ++---
 .../src/plugins/code-generator-plugin.ts             |  5 ++---
 code/lib/builder-vite/src/plugins/csf-plugin.ts      |  5 ++---
 code/lib/builder-vite/src/transform-iframe-html.ts   |  8 +++-----
 code/lib/builder-vite/src/types.ts                   |  7 -------
 code/lib/builder-vite/src/vite-config.ts             |  6 +++---
 code/lib/builder-vite/src/vite-server.ts             |  4 ++--
 14 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/code/lib/builder-vite/input/iframe.html b/code/lib/builder-vite/input/iframe.html
index 874cf855e9a7..911103d945a4 100644
--- a/code/lib/builder-vite/input/iframe.html
+++ b/code/lib/builder-vite/input/iframe.html
@@ -3,7 +3,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title><!-- [TITLE HERE] --></title>
+    <title>Storybook</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script>
       window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';
diff --git a/code/lib/builder-vite/src/build.ts b/code/lib/builder-vite/src/build.ts
index dbb6feefb011..0de0a0fd5282 100644
--- a/code/lib/builder-vite/src/build.ts
+++ b/code/lib/builder-vite/src/build.ts
@@ -1,10 +1,10 @@
 import { build as viteBuild, mergeConfig } from 'vite';
+import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 
-import type { ExtendedOptions } from './types';
 import { sanitizeEnvVars } from './envs';
 
-export async function build(options: ExtendedOptions) {
+export async function build(options: Options) {
   const { presets } = options;
 
   const config = await commonConfig(options, 'build');
diff --git a/code/lib/builder-vite/src/codegen-entries.ts b/code/lib/builder-vite/src/codegen-entries.ts
index 2e2f9b256175..6a6328cf8f96 100644
--- a/code/lib/builder-vite/src/codegen-entries.ts
+++ b/code/lib/builder-vite/src/codegen-entries.ts
@@ -2,7 +2,6 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common';
 import type { Options } from '@storybook/types';
 import slash from 'slash';
 import { normalizePath } from 'vite';
-import type { ExtendedOptions } from './types';
 import { listStories } from './list-stories';
 
 const absoluteFilesToImport = (files: string[], name: string) =>
@@ -10,7 +9,7 @@ const absoluteFilesToImport = (files: string[], name: string) =>
     .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`)
     .join('\n');
 
-export async function generateVirtualStoryEntryCode(options: ExtendedOptions) {
+export async function generateVirtualStoryEntryCode(options: Options) {
   const storyEntries = await listStories(options);
   const resolveMap = storyEntries.reduce<Record<string, string>>(
     (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),
diff --git a/code/lib/builder-vite/src/codegen-iframe-script.ts b/code/lib/builder-vite/src/codegen-iframe-script.ts
index a5818c1a170b..3dd39d71d0a6 100644
--- a/code/lib/builder-vite/src/codegen-iframe-script.ts
+++ b/code/lib/builder-vite/src/codegen-iframe-script.ts
@@ -1,10 +1,9 @@
 import { getRendererName } from '@storybook/core-common';
-import type { PreviewAnnotation } from '@storybook/types';
+import type { Options, PreviewAnnotation } from '@storybook/types';
 import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
-import type { ExtendedOptions } from './types';
 import { processPreviewAnnotation } from './utils/process-preview-annotation';
 
-export async function generateIframeScriptCode(options: ExtendedOptions) {
+export async function generateIframeScriptCode(options: Options) {
   const { presets } = options;
   const rendererName = await getRendererName(options);
 
diff --git a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts
index 53061f175d81..8ab93b5acf68 100644
--- a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts
@@ -1,10 +1,9 @@
 import { loadPreviewOrConfigFile, getFrameworkName } from '@storybook/core-common';
-import type { PreviewAnnotation } from '@storybook/types';
+import type { Options, PreviewAnnotation } from '@storybook/types';
 import { virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';
-import type { ExtendedOptions } from './types';
 import { processPreviewAnnotation } from './utils/process-preview-annotation';
 
-export async function generateModernIframeScriptCode(options: ExtendedOptions) {
+export async function generateModernIframeScriptCode(options: Options) {
   const { presets, configDir } = options;
   const frameworkName = await getFrameworkName(options);
 
diff --git a/code/lib/builder-vite/src/envs.ts b/code/lib/builder-vite/src/envs.ts
index 6b6812ac0f22..4f101306b8d0 100644
--- a/code/lib/builder-vite/src/envs.ts
+++ b/code/lib/builder-vite/src/envs.ts
@@ -1,7 +1,6 @@
 import { stringifyEnvs } from '@storybook/core-common';
 import type { UserConfig as ViteConfig } from 'vite';
-import type { Builder_EnvsRaw } from '@storybook/types';
-import type { ExtendedOptions } from './types';
+import type { Builder_EnvsRaw, Options } from '@storybook/types';
 
 // Allowed env variables on the client
 const allowedEnvVariables = [
@@ -41,7 +40,7 @@ export function stringifyProcessEnvs(raw: Builder_EnvsRaw, envPrefix: ViteConfig
 }
 
 // Sanitize environment variables if needed
-export async function sanitizeEnvVars(options: ExtendedOptions, config: ViteConfig) {
+export async function sanitizeEnvVars(options: Options, config: ViteConfig) {
   const { presets } = options;
   const envsRaw = await presets.apply<Promise<Builder_EnvsRaw>>('env');
   let { define } = config;
diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts
index 0ff1fc5f34cd..fe440c01fe8a 100644
--- a/code/lib/builder-vite/src/index.ts
+++ b/code/lib/builder-vite/src/index.ts
@@ -5,11 +5,11 @@ import type { RequestHandler } from 'express';
 import type { ViteDevServer } from 'vite';
 import express from 'express';
 import { dirname, join, parse } from 'path';
-import type { StorybookConfig as StorybookBaseConfig } from '@storybook/types';
+import type { Options, StorybookConfig as StorybookBaseConfig } from '@storybook/types';
 import { transformIframeHtml } from './transform-iframe-html';
 import { createViteServer } from './vite-server';
 import { build as viteBuild } from './build';
-import type { ExtendedOptions, ViteBuilder, StorybookConfigVite } from './types';
+import type { ViteBuilder, StorybookConfigVite } from './types';
 
 export { withoutVitePlugins } from './utils/without-vite-plugins';
 export { hasVitePlugins } from './utils/has-vite-plugins';
@@ -25,7 +25,7 @@ export * from './types';
  */
 export type StorybookViteConfig = StorybookBaseConfig & StorybookConfigVite;
 
-function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): RequestHandler {
+function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandler {
   return async (req, res, next) => {
     if (!req.url.match(/^\/iframe\.html($|\?)/)) {
       next();
@@ -62,14 +62,14 @@ export const start: ViteBuilder['start'] = async ({
   router,
   server: devServer,
 }) => {
-  server = await createViteServer(options as ExtendedOptions, devServer);
+  server = await createViteServer(options as Options, devServer);
 
   const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
   const previewDirOrigin = join(previewResolvedDir, 'dist');
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
 
-  router.use(iframeMiddleware(options as ExtendedOptions, server));
+  router.use(iframeMiddleware(options as Options, server));
   router.use(server.middlewares);
 
   return {
@@ -80,7 +80,7 @@ export const start: ViteBuilder['start'] = async ({
 };
 
 export const build: ViteBuilder['build'] = async ({ options }) => {
-  const viteCompilation = viteBuild(options as ExtendedOptions);
+  const viteCompilation = viteBuild(options as Options);
 
   const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
   const previewDirOrigin = join(previewResolvedDir, 'dist');
diff --git a/code/lib/builder-vite/src/optimizeDeps.ts b/code/lib/builder-vite/src/optimizeDeps.ts
index 3d00a7783318..10cac8bb55e9 100644
--- a/code/lib/builder-vite/src/optimizeDeps.ts
+++ b/code/lib/builder-vite/src/optimizeDeps.ts
@@ -1,10 +1,9 @@
 import * as path from 'path';
 import { normalizePath, resolveConfig } from 'vite';
 import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
+import type { Options } from '@storybook/types';
 import { listStories } from './list-stories';
 
-import type { ExtendedOptions } from './types';
-
 const INCLUDE_CANDIDATES = [
   '@base2/pretty-print-object',
   '@emotion/core',
@@ -101,7 +100,7 @@ const INCLUDE_CANDIDATES = [
 const asyncFilter = async (arr: string[], predicate: (val: string) => Promise<boolean>) =>
   Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index]));
 
-export async function getOptimizeDeps(config: ViteInlineConfig, options: ExtendedOptions) {
+export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) {
   const { root = process.cwd() } = config;
   const absoluteStories = await listStories(options);
   const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));
diff --git a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts
index 718bc956b367..e3ed3672d099 100644
--- a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts
+++ b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts
@@ -3,6 +3,7 @@
 import * as fs from 'fs';
 import { mergeConfig } from 'vite';
 import type { Plugin } from 'vite';
+import type { Options } from '@storybook/types';
 import { transformIframeHtml } from '../transform-iframe-html';
 import { generateIframeScriptCode } from '../codegen-iframe-script';
 import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
@@ -10,8 +11,6 @@ import { generateImportFnScriptCode } from '../codegen-importfn-script';
 import { generateVirtualStoryEntryCode, generatePreviewEntryCode } from '../codegen-entries';
 import { generateAddonSetupCode } from '../codegen-set-addon-channel';
 
-import type { ExtendedOptions } from '../types';
-
 import {
   virtualAddonSetupFile,
   virtualFileId,
@@ -19,7 +18,7 @@ import {
   virtualStoriesFile,
 } from '../virtual-file-names';
 
-export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
+export function codeGeneratorPlugin(options: Options): Plugin {
   const iframePath = require.resolve('@storybook/builder-vite/input/iframe.html');
   let iframeId: string;
 
diff --git a/code/lib/builder-vite/src/plugins/csf-plugin.ts b/code/lib/builder-vite/src/plugins/csf-plugin.ts
index 1e73af210713..03cf54563bc6 100644
--- a/code/lib/builder-vite/src/plugins/csf-plugin.ts
+++ b/code/lib/builder-vite/src/plugins/csf-plugin.ts
@@ -1,9 +1,8 @@
 import type { Plugin } from 'vite';
 import { vite } from '@storybook/csf-plugin';
-import type { StorybookConfig } from '@storybook/types';
-import type { ExtendedOptions } from '../types';
+import type { StorybookConfig, Options } from '@storybook/types';
 
-export async function csfPlugin(config: ExtendedOptions): Promise<Plugin> {
+export async function csfPlugin(config: Options): Promise<Plugin> {
   const { presets } = config;
 
   const addons = await presets.apply<StorybookConfig['addons']>('addons', []);
diff --git a/code/lib/builder-vite/src/transform-iframe-html.ts b/code/lib/builder-vite/src/transform-iframe-html.ts
index d0b3294bd0f5..e70d0a114a5d 100644
--- a/code/lib/builder-vite/src/transform-iframe-html.ts
+++ b/code/lib/builder-vite/src/transform-iframe-html.ts
@@ -1,11 +1,10 @@
 import { normalizeStories } from '@storybook/core-common';
-import type { CoreConfig, DocsOptions } from '@storybook/types';
-import type { ExtendedOptions } from './types';
+import type { CoreConfig, DocsOptions, Options } from '@storybook/types';
 
 export type PreviewHtml = string | undefined;
 
-export async function transformIframeHtml(html: string, options: ExtendedOptions) {
-  const { configType, features, presets, serverChannelUrl, title } = options;
+export async function transformIframeHtml(html: string, options: Options) {
+  const { configType, features, presets, serverChannelUrl } = options;
   const frameworkOptions = await presets.apply<Record<string, any> | null>('frameworkOptions');
   const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
   const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
@@ -22,7 +21,6 @@ export async function transformIframeHtml(html: string, options: ExtendedOptions
   }));
 
   return html
-    .replace('<!-- [TITLE HERE] -->', title || 'Storybook')
     .replace('[CONFIG_TYPE HERE]', configType || '')
     .replace('[LOGLEVEL HERE]', logLevel || '')
     .replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
diff --git a/code/lib/builder-vite/src/types.ts b/code/lib/builder-vite/src/types.ts
index 1792044dd586..3b03956ab75a 100644
--- a/code/lib/builder-vite/src/types.ts
+++ b/code/lib/builder-vite/src/types.ts
@@ -18,10 +18,3 @@ export type StorybookConfigVite = {
 };
 
 export type BuilderOptions = {};
-
-// Using instead of `Record<string, string>` to provide better aware of used options
-type IframeOptions = {
-  title: string;
-};
-
-export type ExtendedOptions = Options & IframeOptions;
diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts
index 1f0724544afd..c282601e59eb 100644
--- a/code/lib/builder-vite/src/vite-config.ts
+++ b/code/lib/builder-vite/src/vite-config.ts
@@ -10,6 +10,7 @@ import type {
 import { viteExternalsPlugin } from 'vite-plugin-externals';
 import { isPreservingSymlinks, getFrameworkName } from '@storybook/core-common';
 import { globals } from '@storybook/preview/globals';
+import type { Options } from '@storybook/types';
 import {
   codeGeneratorPlugin,
   csfPlugin,
@@ -17,7 +18,6 @@ import {
   mdxPlugin,
   stripStoryHMRBoundary,
 } from './plugins';
-import type { ExtendedOptions } from './types';
 
 export type PluginConfigType = 'build' | 'development';
 
@@ -35,7 +35,7 @@ const configEnvBuild: ConfigEnv = {
 
 // Vite config that is common to development and production mode
 export async function commonConfig(
-  options: ExtendedOptions,
+  options: Options,
   _type: PluginConfigType
 ): Promise<ViteInlineConfig> {
   const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
@@ -69,7 +69,7 @@ export async function commonConfig(
   return config;
 }
 
-export async function pluginConfig(options: ExtendedOptions) {
+export async function pluginConfig(options: Options) {
   const frameworkName = await getFrameworkName(options);
 
   const plugins = [
diff --git a/code/lib/builder-vite/src/vite-server.ts b/code/lib/builder-vite/src/vite-server.ts
index ed92f2e63c02..13489d8580e5 100644
--- a/code/lib/builder-vite/src/vite-server.ts
+++ b/code/lib/builder-vite/src/vite-server.ts
@@ -1,11 +1,11 @@
 import type { Server } from 'http';
 import { createServer } from 'vite';
+import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
-import type { ExtendedOptions } from './types';
 import { getOptimizeDeps } from './optimizeDeps';
 import { sanitizeEnvVars } from './envs';
 
-export async function createViteServer(options: ExtendedOptions, devServer: Server) {
+export async function createViteServer(options: Options, devServer: Server) {
   const { presets } = options;
 
   const commonCfg = await commonConfig(options, 'development');

From 85eef1ca7715cb63bf6724f8f283d4b66eb7ef26 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Mon, 16 Jan 2023 22:34:02 -0500
Subject: [PATCH 4/6] Fix vite framework preset types

---
 code/frameworks/html-vite/src/preset.ts           | 5 +++--
 code/frameworks/html-vite/src/types.ts            | 2 +-
 code/frameworks/preact-vite/src/preset.ts         | 5 +++--
 code/frameworks/preact-vite/src/types.ts          | 2 +-
 code/frameworks/react-vite/src/preset.ts          | 5 +++--
 code/frameworks/react-vite/src/types.ts           | 2 +-
 code/frameworks/svelte-vite/src/preset.ts         | 6 ++++--
 code/frameworks/svelte-vite/src/types.ts          | 2 +-
 code/frameworks/sveltekit/src/preset.ts           | 5 +++--
 code/frameworks/sveltekit/src/types.ts            | 2 +-
 code/frameworks/vue-vite/src/preset.ts            | 4 ++--
 code/frameworks/vue-vite/src/types.ts             | 2 +-
 code/frameworks/vue3-vite/src/preset.ts           | 5 +++--
 code/frameworks/vue3-vite/src/types.ts            | 2 +-
 code/frameworks/web-components-vite/src/preset.ts | 5 +++--
 code/frameworks/web-components-vite/src/types.ts  | 2 +-
 16 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/code/frameworks/html-vite/src/preset.ts b/code/frameworks/html-vite/src/preset.ts
index 8e2f55a64687..814831785a39 100644
--- a/code/frameworks/html-vite/src/preset.ts
+++ b/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',
 };
diff --git a/code/frameworks/html-vite/src/types.ts b/code/frameworks/html-vite/src/types.ts
index 6c424c983077..db508a143b53 100644
--- a/code/frameworks/html-vite/src/types.ts
+++ b/code/frameworks/html-vite/src/types.ts
@@ -15,7 +15,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: {
+  core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {
diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts
index b0f891c626c7..aecc5b9a904a 100644
--- a/code/frameworks/preact-vite/src/preset.ts
+++ b/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',
 };
diff --git a/code/frameworks/preact-vite/src/types.ts b/code/frameworks/preact-vite/src/types.ts
index bba1e821e4c8..d654f5e13bbc 100644
--- a/code/frameworks/preact-vite/src/types.ts
+++ b/code/frameworks/preact-vite/src/types.ts
@@ -15,7 +15,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: {
+  core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {
diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts
index 6f89d4dd61f6..f76e97567979 100644
--- a/code/frameworks/react-vite/src/preset.ts
+++ b/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',
 };
diff --git a/code/frameworks/react-vite/src/types.ts b/code/frameworks/react-vite/src/types.ts
index b368009f9d75..110220c6b7ac 100644
--- a/code/frameworks/react-vite/src/types.ts
+++ b/code/frameworks/react-vite/src/types.ts
@@ -15,7 +15,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: {
+  core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {
diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts
index 0d459212adae..870755ac6094 100644
--- a/code/frameworks/svelte-vite/src/preset.ts
+++ b/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',
 };
diff --git a/code/frameworks/svelte-vite/src/types.ts b/code/frameworks/svelte-vite/src/types.ts
index fdf93ab7b700..8d4ccb8cc9cb 100644
--- a/code/frameworks/svelte-vite/src/types.ts
+++ b/code/frameworks/svelte-vite/src/types.ts
@@ -15,7 +15,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: {
+  core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {
diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts
index 4f6a7d602f1d..42286e5a0785 100644
--- a/code/frameworks/sveltekit/src/preset.ts
+++ b/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',
 };
diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts
index bfb6094ce317..647ea6fb5653 100644
--- a/code/frameworks/sveltekit/src/types.ts
+++ b/code/frameworks/sveltekit/src/types.ts
@@ -15,7 +15,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: {
+  core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {
diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts
index 0460bac09d69..5378d357e81d 100644
--- a/code/frameworks/vue-vite/src/preset.ts
+++ b/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',
diff --git a/code/frameworks/vue-vite/src/types.ts b/code/frameworks/vue-vite/src/types.ts
index 6b72ade8db41..e5ba544f554c 100644
--- a/code/frameworks/vue-vite/src/types.ts
+++ b/code/frameworks/vue-vite/src/types.ts
@@ -15,7 +15,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: {
+  core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {
diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts
index b4ea232db708..22d43a77839f 100644
--- a/code/frameworks/vue3-vite/src/preset.ts
+++ b/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',
 };
diff --git a/code/frameworks/vue3-vite/src/types.ts b/code/frameworks/vue3-vite/src/types.ts
index 2780a44425cc..1461f586aeed 100644
--- a/code/frameworks/vue3-vite/src/types.ts
+++ b/code/frameworks/vue3-vite/src/types.ts
@@ -15,7 +15,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: {
+  core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {
diff --git a/code/frameworks/web-components-vite/src/preset.ts b/code/frameworks/web-components-vite/src/preset.ts
index 497a597ec2af..cd53f7d76283 100644
--- a/code/frameworks/web-components-vite/src/preset.ts
+++ b/code/frameworks/web-components-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/web-components',
 };
diff --git a/code/frameworks/web-components-vite/src/types.ts b/code/frameworks/web-components-vite/src/types.ts
index a4a2cacbdf95..25fd697cb4b3 100644
--- a/code/frameworks/web-components-vite/src/types.ts
+++ b/code/frameworks/web-components-vite/src/types.ts
@@ -15,7 +15,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: {
+  core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {

From 5c59d37c1c637d528cf01a0ffdb5cd697df25ab3 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Mon, 16 Jan 2023 22:43:38 -0500
Subject: [PATCH 5/6] Add note in migration guide for StorybookConfig type

---
 MIGRATION.md | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 283c5e5da813..f50dae7b2eec 100644
--- a/MIGRATION.md
+++ b/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.

From eae25626ff72e86cfb141326ef39844f802335c7 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Mon, 16 Jan 2023 22:48:54 -0500
Subject: [PATCH 6/6] Update docs for type import change

---
 .../common/storybook-vite-builder-ts-configure.ts.mdx     | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
index 0c294a769498..91637411b1ff 100644
--- a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
+++ b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
@@ -1,14 +1,12 @@
 ```ts
 // .storybook/main.ts
 
-import type { StorybookViteConfig } from '@storybook/builder-vite';
+import type { StorybookConfig } from '@storybook/react-vite'; // your framework
 
-const config: StorybookViteConfig = {
+const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  core: {
-    builder: '@storybook/builder-vite',
-  },
+  framework: '@storybook/react-vite',
   async viteFinal(config, options) {
     // Add your configuration here
     return config;