Merge pull request #24650 from storybookjs/norbert/fast-build-toggles

TestBuild: Globalize `@storybook/blocks` if `build.test.emptyBlocks` is `true`

.circleci/config.yml

@@ -507,7 +507,7 @@ workflows:
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 9
+          parallelism: 11
           requires:
             - build-sandboxes
       - e2e-production:
@@ -563,7 +563,7 @@ workflows:
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 20
           requires:
             - build-sandboxes
       - e2e-production:
@@ -620,7 +620,7 @@ workflows:
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 33
+          parallelism: 35
           requires:
             - build-sandboxes
       - e2e-production:

code/.eslintrc.js

@@ -68,6 +68,13 @@ module.exports = {
         '@typescript-eslint/ban-types': 'warn', // should become error, in the future
       },
     },
+    {
+      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
+      files: ['**/builder-vite/**/*.html'],
+      rules: {
+        '@typescript-eslint/no-unused-expressions': 'off', // should become error, in the future
+      },
+    },
     {
       // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies
       files: [

code/builders/builder-vite/input/iframe.html

@@ -22,6 +22,8 @@
     window.STORIES = '[STORIES HERE]';
     window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
 
+    ('OTHER_GLOBLALS HERE');
+
     // We do this so that "module && module.hot" etc. in Storybook source code
     // doesn't fail (it will simply be disabled)
     window.module = undefined;

code/builders/builder-vite/src/transform-iframe-html.ts

@@ -5,6 +5,7 @@ export type PreviewHtml = string | undefined;
 
 export async function transformIframeHtml(html: string, options: Options) {
   const { configType, features, presets } = options;
+  const build = await presets.apply('build');
   const frameworkOptions = await presets.apply<Record<string, any> | null>('frameworkOptions');
   const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
   const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
@@ -20,10 +21,20 @@ export async function transformIframeHtml(html: string, options: Options) {
     importPathMatcher: specifier.importPathMatcher.source,
   }));
 
+  const otherGlobals = {
+    ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
+  };
+
   return html
     .replace('[CONFIG_TYPE HERE]', configType || '')
     .replace('[LOGLEVEL HERE]', logLevel || '')
     .replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
+    .replace(
+      `('OTHER_GLOBLALS HERE');`,
+      Object.entries(otherGlobals)
+        .map(([k, v]) => `window["${k}"] = ${JSON.stringify(v)};`)
+        .join('')
+    )
     .replace(
       `'[CHANNEL_OPTIONS HERE]'`,
       JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {})

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

@@ -77,6 +77,11 @@ export async function commonConfig(
 
 export async function pluginConfig(options: Options) {
   const frameworkName = await getFrameworkName(options);
+  const build = await options.presets.apply('build');
+
+  if (build?.test?.emptyBlocks) {
+    globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
+  }
 
   const plugins = [
     codeGeneratorPlugin(options),

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

@@ -90,6 +90,7 @@ export default async (
     entries,
     nonNormalizedStories,
     modulesCount = 1000,
+    build,
   ] = await Promise.all([
     presets.apply<CoreConfig>('core'),
     presets.apply('frameworkOptions'),
@@ -102,6 +103,7 @@ export default async (
     presets.apply<string[]>('entries', []),
     presets.apply('stories', []),
     options.cache?.get('modulesCount').catch(() => {}),
+    options.presets.apply('build'),
   ]);
 
   const stories = normalizeStories(nonNormalizedStories, {
@@ -217,6 +219,10 @@ export default async (
     `);
   }
 
+  if (build?.test?.emptyBlocks) {
+    globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
+  }
+
   return {
     name: 'preview',
     mode: isProd ? 'production' : 'development',
@@ -269,6 +275,7 @@ export default async (
               importPathMatcher: specifier.importPathMatcher.source,
             })),
             DOCS_OPTIONS: docsOptions,
+            ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
           },
           headHtmlSnippet,
           bodyHtmlSnippet,

code/frameworks/nextjs/src/preset.ts

@@ -20,7 +20,6 @@ import { configureAliasing } from './dependency-map';
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
-  dirname(require.resolve(join('@storybook/builder-webpack5', 'package.json'))),
 ];
 
 const defaultFrameworkOptions: FrameworkOptions = {};

code/lib/cli/src/sandbox-templates.ts

@@ -568,7 +568,7 @@ const benchTemplates = {
       skipTemplateStories: true,
       testBuild: true,
     },
-    skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
+    skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests'],
   },
   'bench/react-webpack-18-ts-test-build': {
     ...baseTemplates['react-webpack/18-ts'],
@@ -578,7 +578,7 @@ const benchTemplates = {
       skipTemplateStories: true,
       testBuild: true,
     },
-    skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
+    skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests'],
   },
 } satisfies Record<string, Template & { isInternal: true }>;
 

code/lib/core-server/src/presets/common-preset.ts

@@ -185,6 +185,10 @@ export const previewAnnotations = async (base: any, options: Options) => {
   return [...config, ...base];
 };
 
+const testBuildFeatures = (value: boolean) => ({
+  emptyBlocks: value,
+});
+
 export const features = async (
   existing: StorybookConfig['features']
 ): Promise<StorybookConfig['features']> => ({
@@ -196,6 +200,16 @@ export const features = async (
   legacyDecoratorFileOrder: false,
 });
 
+export const build = async (value: StorybookConfig['build'], options: Options) => {
+  return {
+    ...value,
+    test: {
+      ...testBuildFeatures(!!options.test),
+      ...value?.test,
+    },
+  };
+};
+
 export const csfIndexer: Indexer = {
   test: /(stories|story)\.(m?js|ts)x?$/,
   createIndex: async (fileName, options) => (await readCsf(fileName, options)).parse().indexInputs,

code/lib/preview/src/globals/types.ts

@@ -1,5 +1,6 @@
 // Here we map the name of a module to their NAME in the global scope.
-export const globals = {
+// eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle
+const _globals = {
   '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__',
   '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__',
   '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0
@@ -13,3 +14,5 @@ export const globals = {
   '@storybook/preview-api': '__STORYBOOK_MODULE_PREVIEW_API__',
   '@storybook/store': '__STORYBOOK_MODULE_STORE__',
 };
+
+export const globals: typeof _globals & Record<string, string> = _globals;

code/lib/types/src/modules/core-common.ts

@@ -76,6 +76,7 @@ export interface Presets {
   apply(extension: 'managerEntries', config: [], args?: any): Promise<string[]>;
   apply(extension: 'refs', config?: [], args?: any): Promise<unknown>;
   apply(extension: 'core', config?: {}, args?: any): Promise<CoreConfig>;
+  apply(extension: 'build', config?: {}, args?: any): Promise<StorybookConfig['build']>;
   apply<T>(extension: string, config?: T, args?: unknown): Promise<T>;
 }
 
@@ -156,6 +157,7 @@ export interface CLIOptions {
   quiet?: boolean;
   versionUpdates?: boolean;
   docs?: boolean;
+  test?: boolean;
   debugWebpack?: boolean;
   webpackStatsJson?: string | boolean;
   outputDir?: string;
@@ -312,6 +314,15 @@ export interface StorybookConfig {
     legacyDecoratorFileOrder?: boolean;
   };
 
+  build?: {
+    test?: {
+      /**
+       * Globalize @storybook/blocks
+       */
+      emptyBlocks?: boolean;
+    };
+  };
+
   /**
    * Tells Storybook where to find stories.
    *