Typescript: Add 'skipCompiler' option to TypeScript presets

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
+    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
     - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
     - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
@@ -310,6 +311,10 @@
 
 ## From version 7.5.0 to 7.6.0
 
+#### typescript.skipBabel deprecated
+
+We will remove the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescirpt.skipCompiler` instead.
+
 #### Primary doc block accepts of prop
 
 The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all.

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -200,7 +200,8 @@ export default async (
     }
   }
 
-  const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel;
+  const shouldCheckTs =
+    typescriptOptions.check && !typescriptOptions.skipBabel && !typescriptOptions.skipCompiler;
   const tsCheckOptions = typescriptOptions.checkOptions || {};
 
   const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {};

code/frameworks/angular/src/preset.ts

@@ -41,5 +41,6 @@ export const typescript: PresetProperty<'typescript', StorybookConfig> = async (
   return {
     ...config,
     skipBabel: true,
+    skipCompiler: true,
   };
 };

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

@@ -20,11 +20,6 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   };
 };
 
-export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
-  ...config,
-  skipBabel: true,
-});
-
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   return mergeConfig(config, {
     plugins: [vueDocgen()],

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

@@ -25,4 +25,5 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
 export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
   ...config,
   skipBabel: true,
+  skipCompiler: true,
 });

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

@@ -25,4 +25,5 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
 export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
   ...config,
   skipBabel: true,
+  skipCompiler: true,
 });

code/lib/types/src/modules/core-common.ts

@@ -223,8 +223,16 @@ export interface TypescriptOptions {
    * Disable parsing typescript files through babel.
    *
    * @default `false`
+   * @deprecated use `skipCompiler` instead
    */
   skipBabel: boolean;
+
+  /**
+   * Disable parsing typescript files through compiler.
+   *
+   * @default `false`
+   */
+  skipCompiler: boolean;
 }
 
 export type Preset =

docs/api/main-config-typescript.md

@@ -90,9 +90,11 @@ Only available for React Storybook projects. Options to pass to react-docgen-typ
 
 ## `skipBabel`
 
+Deprecated: Will be removed in Storybook 8.0. Use `skipCompiler` instead.
+
 Type: `boolean`
 
-Disable parsing of TypeScript files through babel.
+Disable parsing of TypeScript files through Babel.
 
 <!-- prettier-ignore-start -->
 
@@ -103,3 +105,19 @@ Disable parsing of TypeScript files through babel.
 />
 
 <!-- prettier-ignore-end -->
+
+## `skipCompiler`
+
+Type: `boolean`
+
+Disable parsing of TypeScript files through the compiler, which is used for Webpack5.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-typescript-skip-compiler.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    skipCompiler: true,
+  },
+};
+
+export default config;
+```