From cfc2970388758abe071a12f2a5a330c3b43cfbea Mon Sep 17 00:00:00 2001 From: Maks Pikov Date: Sun, 29 Mar 2026 22:07:58 +0000 Subject: [PATCH 1/2] refactor(renderers): extract createPreviewAnnotations factory to internal/common The previewAnnotations preset function was copy-pasted identically across 5 renderer preset files (html, preact, svelte, vue3, web-components). The only difference was the package name string and, for web-components, an extra entry-preview-argtypes entry. Extract a createPreviewAnnotations(packageName, extraEntries?) factory to storybook/internal/common and use it in all 5 renderers. This eliminates the duplication and ensures future changes to the docsEnabled check or the result-building logic only need to be made in one place. --- code/core/src/common/index.ts | 1 + .../src/common/utils/preview-annotations.ts | 25 ++++++++++++++++++ code/renderers/html/src/preset.ts | 19 ++------------ code/renderers/preact/src/preset.ts | 21 ++------------- code/renderers/svelte/src/preset.ts | 21 ++------------- code/renderers/vue3/src/preset.ts | 19 ++------------ code/renderers/web-components/src/preset.ts | 26 +++---------------- 7 files changed, 38 insertions(+), 94 deletions(-) create mode 100644 code/core/src/common/utils/preview-annotations.ts diff --git a/code/core/src/common/index.ts b/code/core/src/common/index.ts index 928d44c89e5e..22b4db44d8c5 100644 --- a/code/core/src/common/index.ts +++ b/code/core/src/common/index.ts @@ -42,6 +42,7 @@ export * from './utils/sync-main-preview-addons'; export * from './utils/setup-addon-in-config'; export * from './utils/wrap-getAbsolutePath-utils'; export * from './js-package-manager'; +export * from './utils/preview-annotations'; export * from './utils/scan-and-transform-files'; export * from './utils/transform-imports'; export * from '../shared/utils/module'; diff --git a/code/core/src/common/utils/preview-annotations.ts b/code/core/src/common/utils/preview-annotations.ts new file mode 100644 index 000000000000..901648baa2dd --- /dev/null +++ b/code/core/src/common/utils/preview-annotations.ts @@ -0,0 +1,25 @@ +import { fileURLToPath } from 'node:url'; + +import type { PresetProperty } from 'storybook/internal/types'; + +/** + * Creates a `previewAnnotations` preset function for a renderer package. + * + * @param packageName - The renderer package name (e.g. `'@storybook/vue3'`) + * @param extraEntries - Additional entry points to include before the docs entry (e.g. `['entry-preview-argtypes']`) + */ +export function createPreviewAnnotations( + packageName: string, + extraEntries: string[] = [] +): PresetProperty<'previewAnnotations'> { + return async (input = [], options) => { + const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0; + + return (input as string[]) + .concat([fileURLToPath(import.meta.resolve(`${packageName}/entry-preview`))]) + .concat(extraEntries.map((entry) => fileURLToPath(import.meta.resolve(`${packageName}/${entry}`)))) + .concat( + docsEnabled ? [fileURLToPath(import.meta.resolve(`${packageName}/entry-preview-docs`))] : [] + ); + }; +} diff --git a/code/renderers/html/src/preset.ts b/code/renderers/html/src/preset.ts index b2db899b8dc8..35b64238975b 100644 --- a/code/renderers/html/src/preset.ts +++ b/code/renderers/html/src/preset.ts @@ -1,18 +1,3 @@ -import { fileURLToPath } from 'node:url'; +import { createPreviewAnnotations } from 'storybook/internal/common'; -import type { PresetProperty } from 'storybook/internal/types'; - -export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( - input = [], - options -) => { - const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0; - const result: string[] = []; - - return result - .concat(input) - .concat([fileURLToPath(import.meta.resolve('@storybook/html/entry-preview'))]) - .concat( - docsEnabled ? [fileURLToPath(import.meta.resolve('@storybook/html/entry-preview-docs'))] : [] - ); -}; +export const previewAnnotations = createPreviewAnnotations('@storybook/html'); diff --git a/code/renderers/preact/src/preset.ts b/code/renderers/preact/src/preset.ts index 1534e69301bc..af3cd08f1939 100644 --- a/code/renderers/preact/src/preset.ts +++ b/code/renderers/preact/src/preset.ts @@ -1,23 +1,6 @@ -import { fileURLToPath } from 'node:url'; +import { createPreviewAnnotations } from 'storybook/internal/common'; -import type { PresetProperty } from 'storybook/internal/types'; - -export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( - input = [], - options -) => { - const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0; - const result: string[] = []; - - return result - .concat(input) - .concat([fileURLToPath(import.meta.resolve('@storybook/preact/entry-preview'))]) - .concat( - docsEnabled - ? [fileURLToPath(import.meta.resolve('@storybook/preact/entry-preview-docs'))] - : [] - ); -}; +export const previewAnnotations = createPreviewAnnotations('@storybook/preact'); /** * Alias react and react-dom to preact/compat similar to the preact vite preset diff --git a/code/renderers/svelte/src/preset.ts b/code/renderers/svelte/src/preset.ts index d152fa23307e..d874e828b94b 100644 --- a/code/renderers/svelte/src/preset.ts +++ b/code/renderers/svelte/src/preset.ts @@ -1,20 +1,3 @@ -import { fileURLToPath } from 'node:url'; +import { createPreviewAnnotations } from 'storybook/internal/common'; -import type { PresetProperty } from 'storybook/internal/types'; - -export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( - input = [], - options -) => { - const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0; - const result: string[] = []; - - return result - .concat(input) - .concat([fileURLToPath(import.meta.resolve('@storybook/svelte/entry-preview'))]) - .concat( - docsEnabled - ? [fileURLToPath(import.meta.resolve('@storybook/svelte/entry-preview-docs'))] - : [] - ); -}; +export const previewAnnotations = createPreviewAnnotations('@storybook/svelte'); diff --git a/code/renderers/vue3/src/preset.ts b/code/renderers/vue3/src/preset.ts index 7d688e4d3627..0844b6e95b37 100644 --- a/code/renderers/vue3/src/preset.ts +++ b/code/renderers/vue3/src/preset.ts @@ -1,18 +1,3 @@ -import { fileURLToPath } from 'node:url'; +import { createPreviewAnnotations } from 'storybook/internal/common'; -import type { PresetProperty } from 'storybook/internal/types'; - -export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( - input = [], - options -) => { - const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0; - const result: string[] = []; - - return result - .concat(input) - .concat([fileURLToPath(import.meta.resolve('@storybook/vue3/entry-preview'))]) - .concat( - docsEnabled ? [fileURLToPath(import.meta.resolve('@storybook/vue3/entry-preview-docs'))] : [] - ); -}; +export const previewAnnotations = createPreviewAnnotations('@storybook/vue3'); diff --git a/code/renderers/web-components/src/preset.ts b/code/renderers/web-components/src/preset.ts index 288a2d8037fd..cc651b8cf1b3 100644 --- a/code/renderers/web-components/src/preset.ts +++ b/code/renderers/web-components/src/preset.ts @@ -1,23 +1,5 @@ -import { fileURLToPath } from 'node:url'; +import { createPreviewAnnotations } from 'storybook/internal/common'; -import type { PresetProperty } from 'storybook/internal/types'; - -export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( - input = [], - options -) => { - const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0; - const result: string[] = []; - - return result - .concat(input) - .concat([ - fileURLToPath(import.meta.resolve('@storybook/web-components/entry-preview')), - fileURLToPath(import.meta.resolve('@storybook/web-components/entry-preview-argtypes')), - ]) - .concat( - docsEnabled - ? [fileURLToPath(import.meta.resolve('@storybook/web-components/entry-preview-docs'))] - : [] - ); -}; +export const previewAnnotations = createPreviewAnnotations('@storybook/web-components', [ + 'entry-preview-argtypes', +]); From adb2ddd733ef3b5e4c54a5a3497c00acdf9777d8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 30 Mar 2026 10:58:36 +0200 Subject: [PATCH 2/2] Linting --- code/core/src/common/utils/preview-annotations.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/core/src/common/utils/preview-annotations.ts b/code/core/src/common/utils/preview-annotations.ts index 901648baa2dd..3f9f546e4994 100644 --- a/code/core/src/common/utils/preview-annotations.ts +++ b/code/core/src/common/utils/preview-annotations.ts @@ -17,7 +17,9 @@ export function createPreviewAnnotations( return (input as string[]) .concat([fileURLToPath(import.meta.resolve(`${packageName}/entry-preview`))]) - .concat(extraEntries.map((entry) => fileURLToPath(import.meta.resolve(`${packageName}/${entry}`)))) + .concat( + extraEntries.map((entry) => fileURLToPath(import.meta.resolve(`${packageName}/${entry}`))) + ) .concat( docsEnabled ? [fileURLToPath(import.meta.resolve(`${packageName}/entry-preview-docs`))] : [] );