From 13c577994260f6097ae0fda55becf3b8da5caf19 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 10:31:11 +0100 Subject: [PATCH 1/5] Add skipCompiler option to TypeScript presets --- .../src/preview/iframe-webpack.config.ts | 3 ++- code/frameworks/angular/src/preset.ts | 1 + code/frameworks/vue-vite/src/preset.ts | 1 + code/frameworks/vue-webpack5/src/preset.ts | 1 + code/frameworks/vue3-webpack5/src/preset.ts | 1 + code/lib/types/src/modules/core-common.ts | 8 ++++++++ docs/api/main-config-typescript.md | 18 ++++++++++++++++++ ...main-config-typescript-skip-compiler.ts.mdx | 16 ++++++++++++++++ 8 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 13b02df7264f..70c212896501 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/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 } } : {}; diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts index ce5796d0c222..f093cb6cc8b8 100644 --- a/code/frameworks/angular/src/preset.ts +++ b/code/frameworks/angular/src/preset.ts @@ -41,5 +41,6 @@ export const typescript: PresetProperty<'typescript', StorybookConfig> = async ( return { ...config, skipBabel: true, + skipCompiler: true, }; }; diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts index bf5b7d45ea5b..736e8860f906 100644 --- a/code/frameworks/vue-vite/src/preset.ts +++ b/code/frameworks/vue-vite/src/preset.ts @@ -23,6 +23,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({ ...config, skipBabel: true, + skipCompiler: true, }); export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { diff --git a/code/frameworks/vue-webpack5/src/preset.ts b/code/frameworks/vue-webpack5/src/preset.ts index 661053fddefb..1e493e9a7f99 100644 --- a/code/frameworks/vue-webpack5/src/preset.ts +++ b/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, }); diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts index 0dd1e931ddd4..1714cc16075e 100644 --- a/code/frameworks/vue3-webpack5/src/preset.ts +++ b/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, }); diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index f5043c362d7c..2aace3e79d40 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/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 = diff --git a/docs/api/main-config-typescript.md b/docs/api/main-config-typescript.md index 425f8703777a..5ac80985eb9f 100644 --- a/docs/api/main-config-typescript.md +++ b/docs/api/main-config-typescript.md @@ -90,6 +90,8 @@ 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. @@ -103,3 +105,19 @@ Disable parsing of TypeScript files through babel. /> + +## `skipCompiler` + +Type: `boolean` + +Disable parsing of TypeScript files through the compiler, which is used for Webpack5. + + + + + + diff --git a/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx new file mode 100644 index 000000000000..aefe172fc6c1 --- /dev/null +++ b/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, vue3-vite) +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; +``` From 3a24793dbc8aa54e61a4962d0b4e9253a0191ca9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 15:10:12 +0100 Subject: [PATCH 2/5] Remove Typescript preset override for vue-vite --- code/frameworks/vue-vite/src/preset.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts index 736e8860f906..3030587afaaa 100644 --- a/code/frameworks/vue-vite/src/preset.ts +++ b/code/frameworks/vue-vite/src/preset.ts @@ -20,12 +20,6 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti }; }; -export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({ - ...config, - skipBabel: true, - skipCompiler: true, -}); - export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { return mergeConfig(config, { plugins: [vueDocgen()], From ec2d929e0f60ab939db46408b163cceef2002687 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 15:10:33 +0100 Subject: [PATCH 3/5] Clarify docs on skipCompiler option --- .../snippets/common/main-config-typescript-skip-compiler.ts.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx index aefe172fc6c1..85c216504c27 100644 --- a/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx +++ b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx @@ -1,7 +1,7 @@ ```ts // .storybook/main.ts -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +// Replace your-framework with the framework you are using (e.g., react-webpack5) import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { From 217b11ed389ee9c87f3eef132fe4fd81d2dea67b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 15:12:26 +0100 Subject: [PATCH 4/5] Add entry to Migration.md about skipCompiler --- MIGRATION.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index ca14c266b621..385aeef95a56 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [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. From e3a59328539d65bff565852a5da73d0801d97966 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 16 Nov 2023 09:27:36 +0100 Subject: [PATCH 5/5] Prettify docs --- docs/api/main-config-typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/main-config-typescript.md b/docs/api/main-config-typescript.md index 5ac80985eb9f..89f11b1cbd5a 100644 --- a/docs/api/main-config-typescript.md +++ b/docs/api/main-config-typescript.md @@ -90,11 +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 +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.