Merge pull request #32881 from storybookjs/norbert/improve-optimizedeps-array

Vite: Update `optimizeViteDeps` for addon-docs and addon-vitest

Author: ndelangen

code/addons/docs/src/preset.ts

@@ -205,10 +205,9 @@ export const resolvedReact = async (existing: any) => ({
 });
 
 const optimizeViteDeps = [
-  '@mdx-js/react',
   '@storybook/addon-docs',
   '@storybook/addon-docs/blocks',
-  'markdown-to-jsx',
+  '@storybook/addon-docs > @mdx-js/react',
 ];
 
 export { webpackX as webpack, docsX as docs, optimizeViteDeps };

code/builders/builder-vite/src/optimizeDeps.ts

@@ -14,6 +14,8 @@ import { listStories } from './list-stories';
 const asyncFilter = async (arr: string[], predicate: (val: string) => Promise<boolean>) =>
   Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index]));
 
+// TODO: This function should be reworked. The code it uses is outdated and we need to investigate
+// More info: https://github.com/storybookjs/storybook/issues/32462#issuecomment-3421326557
 export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) {
   const extraOptimizeDeps = await options.presets.apply('optimizeViteDeps', []);
 
@@ -27,18 +29,15 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Options
   // This function converts ids which might include ` > ` to a real path, if it exists on disk.
   // See https://github.com/vitejs/vite/blob/67d164392e8e9081dc3f0338c4b4b8eea6c5f7da/packages/vite/src/node/optimizer/index.ts#L182-L199
   const resolve = resolvedConfig.createResolver({ asSrc: false });
-  const include = await asyncFilter(
-    Array.from(new Set([...INCLUDE_CANDIDATES, ...extraOptimizeDeps])),
-    async (id) => Boolean(await resolve(id))
-  );
+  const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));
 
   const optimizeDeps: UserConfig['optimizeDeps'] = {
     ...config.optimizeDeps,
     // We don't need to resolve the glob since vite supports globs for entries.
     entries: stories,
     // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
     // if we served it directly to the browser.
-    include: [...include, ...(config.optimizeDeps?.include || [])],
+    include: [...include, ...extraOptimizeDeps, ...(config.optimizeDeps?.include || [])],
   };
 
   return optimizeDeps;