Merge pull request #24838 from storybookjs/version-non-patch-from-7.6…

….0-alpha.5

Release: Prerelease 7.6.0-alpha.6

CHANGELOG.prerelease.md

@@ -1,3 +1,11 @@
+## 7.6.0-alpha.6
+
+- Addon: Move Visual Test addon to the code directory - [#24771](https://github.com/storybookjs/storybook/pull/24771), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- FastBuild: Improve config loading & naming - [#24837](https://github.com/storybookjs/storybook/pull/24837), thanks [@ndelangen](https://github.com/ndelangen)!
+- TestBuild: Revert defaulting to SWC in test build, but keep using esbuild for minification - [#24843](https://github.com/storybookjs/storybook/pull/24843), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Viewport: Add newer device viewports - [#24777](https://github.com/storybookjs/storybook/pull/24777), thanks [@Tomo5524](https://github.com/Tomo5524)!
+- Vite: Prevent non-deterministic build output - [#24833](https://github.com/storybookjs/storybook/pull/24833), thanks [@henkerik](https://github.com/henkerik)!
+
 ## 7.6.0-alpha.5
 
 - Addons, core: Make `react` and Storybook packages `devDependencies` where possible - [#24676](https://github.com/storybookjs/storybook/pull/24676), thanks [@JReinhold](https://github.com/JReinhold)!

code/addons/viewport/src/defaults.ts

@@ -89,6 +89,62 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
     },
     type: 'mobile',
   },
+  iphoneSE3: {
+    name: 'iPhone SE 3rd generation',
+    styles: {
+      height: '667px',
+      width: '375px',
+    },
+    type: 'mobile',
+  },
+  iphone13: {
+    name: 'iPhone 13',
+    styles: {
+      height: '844px',
+      width: '390px',
+    },
+    type: 'mobile',
+  },
+  iphone13pro: {
+    name: 'iPhone 13 Pro',
+    styles: {
+      height: '844px',
+      width: '390px',
+    },
+    type: 'mobile',
+  },
+  iphone13promax: {
+    name: 'iPhone 13 Pro Max',
+    styles: {
+      height: '926px',
+      width: '428px',
+    },
+    type: 'mobile',
+  },
+  iphone14: {
+    name: 'iPhone 14',
+    styles: {
+      height: '844px',
+      width: '390px',
+    },
+    type: 'mobile',
+  },
+  iphone14pro: {
+    name: 'iPhone 14 Pro',
+    styles: {
+      height: '852px',
+      width: '393px',
+    },
+    type: 'mobile',
+  },
+  iphone14promax: {
+    name: 'iPhone 14 Pro Max',
+    styles: {
+      height: '932px',
+      width: '430px',
+    },
+    type: 'mobile',
+  },
   ipad: {
     name: 'iPad',
     styles: {
@@ -105,6 +161,14 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
     },
     type: 'tablet',
   },
+  ipad11p: {
+    name: 'iPad Pro 11-in',
+    styles: {
+      height: '1194px',
+      width: '834px',
+    },
+    type: 'tablet',
+  },
   ipad12p: {
     name: 'iPad Pro 12.9-in',
     styles: {

code/builders/builder-vite/src/list-stories.ts

@@ -9,21 +9,27 @@ export async function listStories(options: Options) {
   const { normalizePath } = await import('vite');
 
   return (
-    await Promise.all(
-      normalizeStories(await options.presets.apply('stories', [], options), {
-        configDir: options.configDir,
-        workingDir: options.configDir,
-      }).map(({ directory, files }) => {
-        const pattern = path.join(directory, files);
-        const absolutePattern = path.isAbsolute(pattern)
-          ? pattern
-          : path.join(options.configDir, pattern);
+    (
+      await Promise.all(
+        normalizeStories(await options.presets.apply('stories', [], options), {
+          configDir: options.configDir,
+          workingDir: options.configDir,
+        }).map(({ directory, files }) => {
+          const pattern = path.join(directory, files);
+          const absolutePattern = path.isAbsolute(pattern)
+            ? pattern
+            : path.join(options.configDir, pattern);
 
-        return glob(slash(absolutePattern), {
-          ...commonGlobOptions(absolutePattern),
-          follow: true,
-        });
-      })
+          return glob(slash(absolutePattern), {
+            ...commonGlobOptions(absolutePattern),
+            follow: true,
+          });
+        })
+      )
     )
-  ).reduce((carry, stories) => carry.concat(stories.map(normalizePath)), []);
+      .reduce((carry, stories) => carry.concat(stories.map(normalizePath)), [])
+      // Sort stories to prevent a non-deterministic build. The result of Glob is not sorted an may differ
+      // for each invocation. This results in a different bundle file hashes from one build to the next.
+      .sort()
+  );
 }

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

@@ -22,7 +22,7 @@ export async function transformIframeHtml(html: string, options: Options) {
   }));
 
   const otherGlobals = {
-    ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
+    ...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
   };
 
   return html

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

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

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

@@ -220,7 +220,7 @@ export default async (
     `);
   }
 
-  if (build?.test?.emptyBlocks) {
+  if (build?.test?.disableBlocks) {
     globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
   }
 
@@ -276,7 +276,7 @@ export default async (
               importPathMatcher: specifier.importPathMatcher.source,
             })),
             DOCS_OPTIONS: docsOptions,
-            ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
+            ...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
           },
           headHtmlSnippet,
           bodyHtmlSnippet,
@@ -323,7 +323,7 @@ export default async (
             fullySpecified: false,
           },
         },
-        builderOptions.useSWC || options.build?.test?.optimizeCompilation
+        builderOptions.useSWC
           ? await createSWCLoader(Object.keys(virtualModuleMapping), options)
           : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)),
         {
@@ -362,7 +362,7 @@ export default async (
         ? {
             minimize: true,
             // eslint-disable-next-line no-nested-ternary
-            minimizer: options.build?.test?.optimizeCompilation
+            minimizer: options.build?.test?.esbuildMinify
               ? [
                   new TerserWebpackPlugin<EsbuildOptions>({
                     parallel: true,

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

@@ -255,15 +255,13 @@ export async function loadPreset(
 
       if (
         storybookOptions.isCritical !== true &&
-        storybookOptions.build?.test?.removeNonFastAddons
+        (storybookOptions.build?.test?.disabledAddons?.length || 0) > 0
       ) {
         filter = (i: PresetConfig) => {
           // @ts-expect-error (Converted from ts-ignore)
           const name = i.name ? i.name : i;
 
-          return (
-            !name.includes('@storybook/addon-docs') && !name.includes('@storybook/addon-coverage')
-          );
+          return !!storybookOptions.build?.test?.disabledAddons?.find((n) => name.includes(n));
         };
       }
 

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

@@ -1,4 +1,4 @@
-import type { PresetProperty, StorybookConfig } from '@storybook/types';
+import type { Options, PresetProperty, StorybookConfig, TestBuildFlags } from '@storybook/types';
 import { normalizeStories, commonGlobOptions } from '@storybook/core-common';
 import { isAbsolute, join } from 'path';
 import slash from 'slash';
@@ -18,8 +18,8 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co
 };
 
 export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => {
-  if (options?.build?.test?.removeMDXEntries) {
-    const out = (
+  if (options?.build?.test?.disableMDXEntries) {
+    return (
       await Promise.all(
         normalizeStories(entries, {
           configDir: options.configDir,
@@ -34,9 +34,15 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie
           });
         })
       )
-    ).reduce((carry, s) => carry.concat(s), []);
-
-    return out.filter((s) => !s.endsWith('.mdx'));
+    ).flatMap((expanded, i) => {
+      const filteredEntries = expanded.filter((s) => !s.endsWith('.mdx'));
+      // only return the filtered entries when there is something to filter
+      // as webpack is faster with unexpanded globs
+      if (filteredEntries.length < expanded.length) {
+        return filteredEntries;
+      }
+      return entries[i];
+    });
   }
   return entries;
 };
@@ -49,8 +55,29 @@ export const typescript: PresetProperty<'typescript', StorybookConfig> = async (
 };
 
 export const docs: PresetProperty<'docs', StorybookConfig> = async (input, options) => {
-  if (options?.build?.test?.removeAutoDocs) {
+  if (options?.build?.test?.disableAutoDocs) {
     return {};
   }
   return input;
 };
+
+const createTestBuildFeatures = (value: boolean): Required<TestBuildFlags> => ({
+  disableBlocks: value,
+  disabledAddons: value ? ['@storybook/addon-docs', '@storybook/addon-coverage'] : [],
+  disableMDXEntries: value,
+  disableAutoDocs: value,
+  disableDocgen: value,
+  disableSourcemaps: value,
+  disableTreeShaking: value,
+  esbuildMinify: value,
+});
+
+export const build = async (value: StorybookConfig['build'], options: Options) => {
+  return {
+    ...value,
+    test: {
+      ...createTestBuildFeatures(!!options.test),
+      ...value?.test,
+    },
+  };
+};

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

@@ -11,7 +11,6 @@ import {
 import type {
   CLIOptions,
   CoreConfig,
-  TestBuildFlags,
   Indexer,
   Options,
   PresetPropertyFn,
@@ -186,17 +185,6 @@ export const previewAnnotations = async (base: any, options: Options) => {
   return [...config, ...base];
 };
 
-const testBuildFeatures = (value: boolean): Required<TestBuildFlags> => ({
-  emptyBlocks: value,
-  removeNonFastAddons: value,
-  removeMDXEntries: value,
-  removeAutoDocs: value,
-  disableDocgen: value,
-  disableSourcemaps: value,
-  disableTreeShaking: value,
-  optimizeCompilation: value,
-});
-
 export const features = async (
   existing: StorybookConfig['features']
 ): Promise<StorybookConfig['features']> => ({
@@ -208,16 +196,6 @@ 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/core-server/src/utils/StoryIndexGenerator.ts

@@ -337,7 +337,7 @@ export class StoryIndexGenerator {
     const createDocEntry =
       autodocs === true || (autodocs === 'tag' && hasAutodocsTag) || isStoriesMdx;
 
-    if (createDocEntry && this.options.build?.test?.removeAutoDocs !== true) {
+    if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) {
       const name = this.options.docs.defaultName ?? 'Docs';
       const { metaId } = indexInputs[0];
       const { title } = entries[0];

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

@@ -266,19 +266,19 @@ export interface TestBuildFlags {
   /**
    * The package @storybook/blocks will be excluded from the bundle, even when imported in e.g. the preview.
    */
-  emptyBlocks?: boolean;
+  disableBlocks?: boolean;
   /**
-   * Disable all addons
+   * Disable specific addons
    */
-  removeNonFastAddons?: boolean;
+  disabledAddons?: string[];
   /**
    * Filter out .mdx stories entries
    */
-  removeMDXEntries?: boolean;
+  disableMDXEntries?: boolean;
   /**
    * Override autodocs to be disabled
    */
-  removeAutoDocs?: boolean;
+  disableAutoDocs?: boolean;
   /**
    * Override docgen to be disabled.
    */
@@ -292,9 +292,9 @@ export interface TestBuildFlags {
    */
   disableTreeShaking?: boolean;
   /**
-   * Compile/Optimize with SWC.
+   * Minify with ESBuild when using webpack.
    */
-  optimizeCompilation?: boolean;
+  esbuildMinify?: boolean;
 }
 
 export interface TestBuildConfig {

code/package.json

@@ -259,6 +259,9 @@
     "vite-plugin-turbosnap": "^1.0.1",
     "wait-on": "^7.0.1"
   },
+  "devDependencies": {
+    "@chromaui/addon-visual-tests": "^0.0.114"
+  },
   "dependenciesMeta": {
     "ejs": {
       "built": false
@@ -325,5 +328,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.6.0-alpha.6"
 }

code/ui/components/package.json

@@ -71,7 +71,6 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@chromaui/addon-visual-tests": "^0.0.77",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@storybook/icons": "^1.1.6",