diff --git a/code/addons/vitest/src/vitest-plugin/index.ts b/code/addons/vitest/src/vitest-plugin/index.ts index e5696bdcaf4..138acce92c2 100644 --- a/code/addons/vitest/src/vitest-plugin/index.ts +++ b/code/addons/vitest/src/vitest-plugin/index.ts @@ -29,6 +29,7 @@ import sirv from 'sirv'; import { dedent } from 'ts-dedent'; // ! Relative import to prebundle it without needing to depend on the Vite builder +import { INCLUDE_CANDIDATES } from '../../../../builders/builder-vite/src/constants'; import { withoutVitePlugins } from '../../../../builders/builder-vite/src/utils/without-vite-plugins'; import type { InternalOptions, UserOptions } from './types'; @@ -151,6 +152,7 @@ export const storybookTest = async (options?: UserOptions): Promise => staticDirs, previewLevelTags, core, + extraOptimizeDeps, ] = await Promise.all([ getStoryGlobsAndFiles(presets, directories), presets.apply('framework', undefined), @@ -159,6 +161,7 @@ export const storybookTest = async (options?: UserOptions): Promise => presets.apply('staticDirs', []), extractTagsFromPreview(finalOptions.configDir), presets.apply('core'), + presets.apply('optimizeViteDeps', []), ]); const pluginsToIgnore = [ @@ -329,6 +332,8 @@ export const storybookTest = async (options?: UserOptions): Promise => '@storybook/addon-vitest/internal/setup-file', '@storybook/addon-vitest/internal/global-setup', '@storybook/addon-vitest/internal/test-utils', + ...extraOptimizeDeps, + ...INCLUDE_CANDIDATES, ...(frameworkName?.includes('react') || frameworkName?.includes('nextjs') ? ['react-dom/test-utils'] : []), diff --git a/code/builders/builder-vite/src/constants.ts b/code/builders/builder-vite/src/constants.ts new file mode 100644 index 00000000000..fc4d5145e4b --- /dev/null +++ b/code/builders/builder-vite/src/constants.ts @@ -0,0 +1,146 @@ +// It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart +// TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens +export const INCLUDE_CANDIDATES = [ + '@ampproject/remapping', + '@base2/pretty-print-object', + '@emotion/core', + '@emotion/is-prop-valid', + '@emotion/styled', + '@jridgewell/sourcemap-codec', + '@storybook/addon-a11y/preview', + '@storybook/addon-designs/blocks', + '@storybook/addon-docs/blocks', + '@storybook/addon-docs/preview', + '@storybook/addon-links/preview', + '@storybook/addon-themes', + '@storybook/addon-themes/preview', + '@storybook/html', + '@storybook/html/dist/entry-preview-docs.mjs', + '@storybook/html/dist/entry-preview.mjs', + '@storybook/nextjs-vite/dist/preview.mjs', + '@storybook/preact', + '@storybook/preact/dist/entry-preview-docs.mjs', + '@storybook/preact/dist/entry-preview.mjs', + '@storybook/react > acorn-jsx', + '@storybook/react', + '@storybook/react/dist/entry-preview-docs.mjs', + '@storybook/react/dist/entry-preview-rsc.mjs', + '@storybook/react/dist/entry-preview.mjs', + '@storybook/svelte', + '@storybook/svelte/dist/entry-preview-docs.mjs', + '@storybook/svelte/dist/entry-preview.mjs', + '@storybook/vue3', + '@storybook/vue3/dist/entry-preview-docs.mjs', + '@storybook/vue3/dist/entry-preview.mjs', + '@storybook/web-components', + '@storybook/web-components/dist/entry-preview-docs.mjs', + '@storybook/web-components/dist/entry-preview.mjs', + 'acorn-jsx', + 'acorn-walk', + 'acorn', + 'airbnb-js-shims', + 'ansi-to-html', + 'aria-query', + 'axe-core', + 'axobject-query', + 'chromatic/isChromatic', + 'color-convert', + 'deep-object-diff', + 'doctrine', + 'emotion-theming', + 'escodegen', + 'estraverse', + 'fast-deep-equal', + 'html-tags', + 'isobject', + 'loader-utils', + 'lodash/camelCase.js', + 'lodash/camelCase', + 'lodash/cloneDeep.js', + 'lodash/cloneDeep', + 'lodash/countBy.js', + 'lodash/countBy', + 'lodash/debounce.js', + 'lodash/debounce', + 'lodash/isEqual.js', + 'lodash/isEqual', + 'lodash/isFunction.js', + 'lodash/isFunction', + 'lodash/isPlainObject.js', + 'lodash/isPlainObject', + 'lodash/isString.js', + 'lodash/isString', + 'lodash/kebabCase.js', + 'lodash/kebabCase', + 'lodash/mapKeys.js', + 'lodash/mapKeys', + 'lodash/mapValues.js', + 'lodash/mapValues', + 'lodash/merge.js', + 'lodash/merge', + 'lodash/mergeWith.js', + 'lodash/mergeWith', + 'lodash/pick.js', + 'lodash/pick', + 'lodash/pickBy.js', + 'lodash/pickBy', + 'lodash/startCase.js', + 'lodash/startCase', + 'lodash/throttle.js', + 'lodash/throttle', + 'lodash/uniq.js', + 'lodash/uniq', + 'lodash/upperFirst.js', + 'lodash/upperFirst', + 'memoizerific', + 'mockdate', + 'msw-storybook-addon', + 'overlayscrollbars', + 'polished', + 'prettier/parser-babel', + 'prettier/parser-flow', + 'prettier/parser-typescript', + 'prop-types', + 'qs', + 'react-dom', + 'react-dom/client', + 'react-dom/test-utils', + 'react-fast-compare', + 'react-is', + 'react-textarea-autosize', + 'react', + 'react/jsx-dev-runtime', + 'react/jsx-runtime', + 'refractor/core', + 'refractor/lang/bash.js', + 'refractor/lang/css.js', + 'refractor/lang/graphql.js', + 'refractor/lang/js-extras.js', + 'refractor/lang/json.js', + 'refractor/lang/jsx.js', + 'refractor/lang/markdown.js', + 'refractor/lang/markup.js', + 'refractor/lang/tsx.js', + 'refractor/lang/typescript.js', + 'refractor/lang/yaml.js', + 'regenerator-runtime/runtime.js', + 'sb-original/default-loader', + 'sb-original/image-context', + 'semver', // TODO: Remove once https://github.com/npm/node-semver/issues/712 is fixed + 'slash', + 'store2', + 'storybook/actions', + 'storybook/actions/decorator', + 'storybook/internal/core-events', + 'storybook/internal/csf', + 'storybook/internal/preview/runtime', + 'storybook/preview-api', + 'storybook/viewport', + 'synchronous-promise', + 'telejson', + 'ts-dedent', + 'unfetch', + 'util-deprecate', + 'vue', + 'warning', +]; diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 585b09996ce..9b772953873 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -4,155 +4,9 @@ import type { Options } from 'storybook/internal/types'; import type { UserConfig, InlineConfig as ViteInlineConfig } from 'vite'; +import { INCLUDE_CANDIDATES } from './constants'; import { listStories } from './list-stories'; -// It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart -// TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens -const INCLUDE_CANDIDATES = [ - '@ampproject/remapping', - '@base2/pretty-print-object', - '@emotion/core', - '@emotion/is-prop-valid', - '@emotion/styled', - '@jridgewell/sourcemap-codec', - '@storybook/addon-a11y/preview', - '@storybook/addon-designs/blocks', - '@storybook/addon-docs/blocks', - '@storybook/addon-docs/preview', - '@storybook/addon-links/preview', - '@storybook/addon-themes', - '@storybook/addon-themes/preview', - '@storybook/html', - '@storybook/html/dist/entry-preview-docs.mjs', - '@storybook/html/dist/entry-preview.mjs', - '@storybook/nextjs-vite/dist/preview.mjs', - '@storybook/preact', - '@storybook/preact/dist/entry-preview-docs.mjs', - '@storybook/preact/dist/entry-preview.mjs', - '@storybook/react > acorn-jsx', - '@storybook/react', - '@storybook/react/dist/entry-preview-docs.mjs', - '@storybook/react/dist/entry-preview-rsc.mjs', - '@storybook/react/dist/entry-preview.mjs', - '@storybook/svelte', - '@storybook/svelte/dist/entry-preview-docs.mjs', - '@storybook/svelte/dist/entry-preview.mjs', - '@storybook/vue3', - '@storybook/vue3/dist/entry-preview-docs.mjs', - '@storybook/vue3/dist/entry-preview.mjs', - '@storybook/web-components', - '@storybook/web-components/dist/entry-preview-docs.mjs', - '@storybook/web-components/dist/entry-preview.mjs', - 'acorn-jsx', - 'acorn-walk', - 'acorn', - 'airbnb-js-shims', - 'ansi-to-html', - 'aria-query', - 'axe-core', - 'axobject-query', - 'chromatic/isChromatic', - 'color-convert', - 'deep-object-diff', - 'doctrine', - 'emotion-theming', - 'escodegen', - 'estraverse', - 'fast-deep-equal', - 'html-tags', - 'isobject', - 'loader-utils', - 'lodash/camelCase.js', - 'lodash/camelCase', - 'lodash/cloneDeep.js', - 'lodash/cloneDeep', - 'lodash/countBy.js', - 'lodash/countBy', - 'lodash/debounce.js', - 'lodash/debounce', - 'lodash/isEqual.js', - 'lodash/isEqual', - 'lodash/isFunction.js', - 'lodash/isFunction', - 'lodash/isPlainObject.js', - 'lodash/isPlainObject', - 'lodash/isString.js', - 'lodash/isString', - 'lodash/kebabCase.js', - 'lodash/kebabCase', - 'lodash/mapKeys.js', - 'lodash/mapKeys', - 'lodash/mapValues.js', - 'lodash/mapValues', - 'lodash/merge.js', - 'lodash/merge', - 'lodash/mergeWith.js', - 'lodash/mergeWith', - 'lodash/pick.js', - 'lodash/pick', - 'lodash/pickBy.js', - 'lodash/pickBy', - 'lodash/startCase.js', - 'lodash/startCase', - 'lodash/throttle.js', - 'lodash/throttle', - 'lodash/uniq.js', - 'lodash/uniq', - 'lodash/upperFirst.js', - 'lodash/upperFirst', - 'memoizerific', - 'mockdate', - 'msw-storybook-addon', - 'overlayscrollbars', - 'polished', - 'prettier/parser-babel', - 'prettier/parser-flow', - 'prettier/parser-typescript', - 'prop-types', - 'qs', - 'react-dom', - 'react-dom/client', - 'react-dom/test-utils', - 'react-fast-compare', - 'react-is', - 'react-textarea-autosize', - 'react', - 'react/jsx-dev-runtime', - 'react/jsx-runtime', - 'refractor/core', - 'refractor/lang/bash.js', - 'refractor/lang/css.js', - 'refractor/lang/graphql.js', - 'refractor/lang/js-extras.js', - 'refractor/lang/json.js', - 'refractor/lang/jsx.js', - 'refractor/lang/markdown.js', - 'refractor/lang/markup.js', - 'refractor/lang/tsx.js', - 'refractor/lang/typescript.js', - 'refractor/lang/yaml.js', - 'regenerator-runtime/runtime.js', - 'sb-original/default-loader', - 'sb-original/image-context', - 'semver', // TODO: Remove once https://github.com/npm/node-semver/issues/712 is fixed - 'slash', - 'store2', - 'storybook/actions', - 'storybook/actions/decorator', - 'storybook/internal/core-events', - 'storybook/internal/csf', - 'storybook/internal/preview/runtime', - 'storybook/preview-api', - 'storybook/viewport', - 'synchronous-promise', - 'telejson', - 'ts-dedent', - 'unfetch', - 'util-deprecate', - 'vue', - 'warning', -]; - /** * Helper function which allows us to `filter` with an async predicate. Uses Promise.all for * performance.