Addons, core: Make react and Storybook packages devDependencies where possible

code/addons/docs/src/preset.ts

@@ -194,12 +194,12 @@ const docsX = docs as any;
 
 ensureReactPeerDeps();
 
-const optimizeDeps = [
+const optimizeViteDeps = [
   '@mdx-js/react',
   '@storybook/addon-docs > acorn-jsx',
   '@storybook/addon-docs',
   '@storybook/addon-essentials/docs/mdx-react-shim',
   'markdown-to-jsx',
 ];
 
-export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs, optimizeDeps };
+export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs, optimizeViteDeps };

code/builders/builder-manager/src/index.ts

@@ -9,8 +9,8 @@ import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
 import aliasPlugin from 'esbuild-plugin-alias';
 
 import { stringifyProcessEnvs } from '@storybook/core-common';
+import { globalsModuleInfoMap } from '@storybook/manager/globals-module-info';
 import { getTemplatePath, renderHTML } from './utils/template';
-import { definitions } from './utils/globals';
 import { wrapManagerEntries } from './utils/managerEntries';
 import type {
   BuilderBuildResult,
@@ -89,7 +89,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
         util: require.resolve('util/util.js'),
         assert: require.resolve('browser-assert'),
       }),
-      globalExternals(definitions),
+      globalExternals(globalsModuleInfoMap),
       pnpPlugin(),
     ],
 

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

@@ -8,17 +8,9 @@ const INCLUDE_CANDIDATES = [
   '@emotion/core',
   '@emotion/is-prop-valid',
   '@emotion/styled',
-  '@storybook/channels',
-  '@storybook/client-api',
-  '@storybook/client-logger',
-  '@storybook/core/client',
-  '@storybook/global',
-  '@storybook/preview-api',
-  '@storybook/preview-web',
   '@storybook/react > acorn-jsx',
   '@storybook/react',
   '@storybook/svelte',
-  '@storybook/types',
   '@storybook/vue3',
   'acorn-jsx',
   'acorn-walk',
@@ -121,7 +113,7 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise<bo
   Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index]));
 
 export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) {
-  const extraOptimizeDeps = await options.presets.apply('optimizeDeps', []);
+  const extraOptimizeDeps = await options.presets.apply('optimizeViteDeps', []);
 
   const { root = process.cwd() } = config;
   const { normalizePath, resolveConfig } = await import('vite');

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

@@ -8,7 +8,7 @@ import type {
   InlineConfig,
 } from 'vite';
 import { isPreservingSymlinks, getFrameworkName, getBuilderOptions } from '@storybook/core-common';
-import { globals } from '@storybook/preview/globals';
+import { globalsNameReferenceMap } from '@storybook/preview/globals';
 import type { Options } from '@storybook/types';
 import {
   codeGeneratorPlugin,
@@ -96,7 +96,7 @@ export async function pluginConfig(options: Options) {
         }
       },
     },
-    await externalGlobalsPlugin(globals),
+    await externalGlobalsPlugin(globalsNameReferenceMap),
   ] as PluginOption[];
 
   // TODO: framework doesn't exist, should move into framework when/if built

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -10,7 +10,7 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import slash from 'slash';
 
 import type { Options, CoreConfig, DocsOptions, PreviewAnnotation } from '@storybook/types';
-import { globals } from '@storybook/preview/globals';
+import { globalsNameReferenceMap } from '@storybook/preview/globals';
 import {
   getBuilderOptions,
   getRendererName,
@@ -235,7 +235,7 @@ export default async (
     watchOptions: {
       ignored: /node_modules/,
     },
-    externals: globals,
+    externals: globalsNameReferenceMap,
     ignoreWarnings: [
       {
         message: /export '\S+' was not found in 'global'/,

code/lib/manager-api/src/index.tsx

@@ -67,6 +67,8 @@ import * as whatsnew from './modules/whatsnew';
 import * as globals from './modules/globals';
 import type { ModuleFn } from './lib/types';
 
+import { types } from './lib/addons';
+
 export * from './lib/shortcut';
 
 const { ActiveTabs } = layout;
@@ -506,5 +508,14 @@ export function useArgTypes(): ArgTypes {
 
 export { addons } from './lib/addons';
 
+/**
+ * We need to rename this so it's not compiled to a straight re-export
+ * Our globalization plugin can't handle an import and export of the same name in different lines
+ * @deprecated
+ */
+const typesX = types;
+
+export { typesX as types };
+
 /* deprecated */
-export { mockChannel, types, type Addon, type AddonStore } from './lib/addons';
+export { mockChannel, type Addon, type AddonStore } from './lib/addons';

code/lib/preview/package.json

@@ -70,7 +70,6 @@
     "access": "public"
   },
   "bundler": {
-    "pre": "./scripts/generate-exports-file.ts",
     "browserEntries": [
       "./src/runtime.ts"
     ],

code/lib/preview/src/globals.ts

@@ -1 +1 @@
-export * from './globals/types';
+export * from './globals/globals';