Do not optimize storybook packages (#323)

This PR removes many of the storybook packages from pre-bundling, which should save a little bit of time in startup, and will 🤞 work a little better in pnpm (see #55, although this probably doesn't fix it yet).  

Furthermore, after storybook 6.5.0-alpha.58, we can exclude the framework packages from pre-bundling also, but in versions earlier than that, we do need to pre-bundle.  So I added a dependency on `semver`, to compare the storybook framework's version from package.json and determine whether to pre-bundle it or not.  I tested back to 6.4.0, and it worked fine as long as I added titles to stories (autotitle wasn't working that far back).  

Here's the difference it makes in the pre-bundled files:

Before:
<img width="343" alt="Pasted_Image_4_7_22__11_31_PM" src="https://user-images.githubusercontent.com/4616705/162357449-de936070-b450-4873-bb0a-ffb29a9f1645.png">


After:
<img width="346" alt="Pasted_Image_4_7_22__11_31_PM" src="https://user-images.githubusercontent.com/4616705/162357382-65933d1d-bf00-422a-b95a-3eb5ecf62c2e.png">

packages/builder-vite/optimizeDeps.ts

@@ -1,6 +1,7 @@
 import * as path from 'path';
 import { normalizePath, resolveConfig, UserConfig } from 'vite';
 import { listStories } from './list-stories';
+import semver from 'semver';
 
 import type { ExtendedOptions } from './types';
 
@@ -10,20 +11,7 @@ const INCLUDE_CANDIDATES = [
   '@emotion/is-prop-valid',
   '@emotion/styled',
   '@mdx-js/react',
-  '@storybook/addon-docs > acorn-jsx',
-  '@storybook/addon-docs',
-  '@storybook/addons',
-  '@storybook/channel-postmessage',
-  '@storybook/channel-websocket',
-  '@storybook/client-api',
-  '@storybook/client-logger',
-  '@storybook/core/client',
   '@storybook/csf',
-  '@storybook/preview-web',
-  '@storybook/react > acorn-jsx',
-  '@storybook/react',
-  '@storybook/svelte',
-  '@storybook/vue3',
   'acorn-jsx',
   'acorn-walk',
   'acorn',
@@ -109,7 +97,21 @@ export async function getOptimizeDeps(
   const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));
   const resolvedConfig = await resolveConfig(config, 'serve', 'development');
 
-  const exclude = [];
+  // 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(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));
+
+  // We can exclude some packages which otherwise are optimized
+  const exclude = [
+    '@storybook/addon-docs',
+    '@storybook/client-api',
+    '@storybook/client-logger',
+    '@storybook/preview-web',
+    '@storybook/channel-postmessage',
+    '@storybook/channel-websocket',
+    '@storybook/addons',
+  ];
   // This is necessary to support react < 18 with new versions of @storybook/react that support react 18.
   // TODO: narrow this down to just framework === 'react'.  But causes a vue dev start problem in this monorepo.
   try {
@@ -119,11 +121,16 @@ export async function getOptimizeDeps(
       exclude.push('react-dom/client');
     }
   }
-
-  // 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(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));
+  // Depending on the user's storybook version, we can also exclude the framework from prebundling
+  // See https://github.com/storybookjs/storybook/pull/17875
+  const { frameworkPath, framework } = options;
+  const frameworkPackageName = frameworkPath || `@storybook/${framework}`;
+  const sbVersion: string | undefined = (await import(`${frameworkPackageName}/package.json`))?.version;
+  if (sbVersion && semver.gte(sbVersion, '6.5.0-alpha.58', { includePrerelease: true })) {
+    exclude.push(frameworkPackageName);
+  } else {
+    include.push(frameworkPackageName);
+  }
 
   return {
     // We don't need to resolve the glob since vite supports globs for entries.

packages/builder-vite/package.json

@@ -24,12 +24,14 @@
     "glob-promise": "^4.2.0",
     "magic-string": "^0.26.1",
     "react-docgen": "^6.0.0-alpha.0",
+    "semver": "^7.3.5",
     "slash": "^3.0.0",
     "vite-plugin-mdx": "^3.5.6"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.23",
+    "@types/semver": "^7.3.9",
     "vue-docgen-api": "^4.40.0"
   },
   "peerDependencies": {

yarn.lock

@@ -3502,13 +3502,15 @@ __metadata:
     "@storybook/source-loader": ^6.3.12
     "@types/express": ^4.17.13
     "@types/node": ^17.0.23
+    "@types/semver": ^7.3.9
     "@vitejs/plugin-react": ^1.0.8
     ast-types: ^0.14.2
     es-module-lexer: ^0.9.3
     glob: ^7.2.0
     glob-promise: ^4.2.0
     magic-string: ^0.26.1
     react-docgen: ^6.0.0-alpha.0
+    semver: ^7.3.5
     slash: ^3.0.0
     vite-plugin-mdx: ^3.5.6
     vue-docgen-api: ^4.40.0
@@ -4887,6 +4889,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/semver@npm:^7.3.9":
+  version: 7.3.9
+  resolution: "@types/semver@npm:7.3.9"
+  checksum: 60bfcfdfa7f937be2c6f4b37ddb6714fb0f27b05fe4cbdfdd596a97d35ed95d13ee410efdd88e72a66449d0384220bf20055ab7d6b5df10de4990fbd20e5cbe0
+  languageName: node
+  linkType: hard
+
 "@types/serve-static@npm:*":
   version: 1.13.10
   resolution: "@types/serve-static@npm:1.13.10"