Merge branch 'next' into docs_visual_snaphot_test_changes

CHANGELOG.prerelease.md

@@ -1,3 +1,17 @@
+## 7.6.0-beta.2
+
+- Actions: Fix `@storybook/core-events/preview-errors` dependency missing for Yarn PnP - [#24973](https://github.com/storybookjs/storybook/pull/24973), thanks [@JReinhold](https://github.com/JReinhold)!
+- Webpack5: Resolve circular dependency and fix HMR - [#24974](https://github.com/storybookjs/storybook/pull/24974), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
+## 7.6.0-beta.1
+
+- SvelteKit: Default to log an action for `goto`, `invalidate` and `invalidateAll` - [#24955](https://github.com/storybookjs/storybook/pull/24955), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
+
+## 7.6.0-beta.0
+
+- Next.js: Remove duplicate Fast Refresh plugin init - [#24963](https://github.com/storybookjs/storybook/pull/24963), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Test: Don't attach action to function mock if action was added already - [#24966](https://github.com/storybookjs/storybook/pull/24966), thanks [@tmeasday](https://github.com/tmeasday)!
+
 ## 7.6.0-alpha.7
 
 - Actions: Warn on implicit actions - [#24856](https://github.com/storybookjs/storybook/pull/24856), thanks [@kasperpeulen](https://github.com/kasperpeulen)!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -63,6 +63,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
+    "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@types/uuid": "^9.0.1",
     "dequal": "^2.0.2",
@@ -72,7 +73,6 @@
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
-    "@storybook/core-events": "workspace:*",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/actions/src/loaders.ts

@@ -16,7 +16,7 @@ const attachActionsToFunctionMocks: LoaderFunction = (context) => {
     )
     .forEach(([key, value]) => {
       const previous = value.getMockImplementation();
-      if (previous?._actionAttached !== true) {
+      if (previous?._actionAttached !== true && previous?.isAction !== true) {
         const implementation = (...params: unknown[]) => {
           action(key)(...params);
           return previous?.(...params);

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storyshots-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",

code/addons/storyshots-puppeteer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/builders/builder-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -43,6 +43,8 @@
     },
     "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
     "./templates/preview.ejs": "./templates/preview.ejs",
+    "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js",
+    "./templates/virtualModuleStory.template.js": "./templates/virtualModuleStory.template.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",

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

@@ -18,6 +18,7 @@ import {
 import prettyTime from 'pretty-hrtime';
 
 export * from './types';
+export * from './preview/virtual-module-mapping';
 
 export const printDuration = (startTime: [number, number]) =>
   prettyTime(process.hrtime(startTime))

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

@@ -17,11 +17,11 @@ import {
   normalizeStories,
   isPreservingSymlinks,
 } from '@storybook/core-common';
-import type { BuilderOptions } from '@storybook/core-webpack';
-import { getVirtualModuleMapping } from '@storybook/core-webpack';
+import { type BuilderOptions } from '@storybook/core-webpack';
 import { dedent } from 'ts-dedent';
 import type { TypescriptOptions } from '../types';
 import { createBabelLoader, createSWCLoader } from './loaders';
+import { getVirtualModules } from './virtual-module-mapping';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
@@ -135,18 +135,16 @@ export default async (
     externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
   }
 
-  const virtualModuleMapping = await getVirtualModuleMapping(options);
-
-  Object.keys(virtualModuleMapping).forEach((key) => {
-    entries.push(key);
-  });
+  const { virtualModules: virtualModuleMapping, entries: dynamicEntries } = await getVirtualModules(
+    options
+  );
 
   return {
     name: 'preview',
     mode: isProd ? 'production' : 'development',
     bail: isProd,
     devtool: options.build?.test?.disableSourcemaps ? false : 'cheap-module-source-map',
-    entry: entries,
+    entry: [...(entries ?? []), ...dynamicEntries],
     output: {
       path: resolve(process.cwd(), outputDir),
       filename: isProd ? '[name].[contenthash:8].iframe.bundle.js' : '[name].iframe.bundle.js',

code/lib/core-webpack/src/virtual-module-mapping.ts → code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts

@@ -1,5 +1,3 @@
-import type { Options, PreviewAnnotation } from '@storybook/types';
-import { isAbsolute, join, resolve } from 'path';
 import {
   getBuilderOptions,
   getRendererName,
@@ -9,17 +7,19 @@ import {
   normalizeStories,
   readTemplate,
 } from '@storybook/core-common';
+import type { Options, PreviewAnnotation } from '@storybook/types';
+import { isAbsolute, join, resolve } from 'path';
 import slash from 'slash';
-import type { BuilderOptions } from './types';
-import { toImportFn } from './to-importFn';
-import { toRequireContextString } from './to-require-context';
+import { toImportFn, toRequireContextString } from '@storybook/core-webpack';
+import type { BuilderOptions } from '../types';
 
-export const getVirtualModuleMapping = async (options: Options) => {
-  const virtualModuleMapping: Record<string, string> = {};
+export const getVirtualModules = async (options: Options) => {
+  const virtualModules: Record<string, string> = {};
   const builderOptions = await getBuilderOptions<BuilderOptions>(options);
   const workingDir = process.cwd();
   const isProd = options.configType === 'PRODUCTION';
   const nonNormalizedStories = await options.presets.apply('stories', []);
+  const entries = [];
 
   const stories = normalizeStories(nonNormalizedStories, {
     configDir: options.configDir,
@@ -53,9 +53,9 @@ export const getVirtualModuleMapping = async (options: Options) => {
     const storiesPath = resolve(join(workingDir, storiesFilename));
 
     const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
-    virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport });
+    virtualModules[storiesPath] = toImportFn(stories, { needPipelinedImport });
     const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'));
-    virtualModuleMapping[configEntryPath] = handlebars(
+    virtualModules[configEntryPath] = handlebars(
       await readTemplate(
         require.resolve(
           '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars'
@@ -67,14 +67,16 @@ export const getVirtualModuleMapping = async (options: Options) => {
       }
       // We need to double escape `\` for webpack. We may have some in windows paths
     ).replace(/\\/g, '\\\\');
+    entries.push(configEntryPath);
   } else {
     const rendererName = await getRendererName(options);
 
     const rendererInitEntry = resolve(join(workingDir, 'storybook-init-renderer-entry.js'));
-    virtualModuleMapping[rendererInitEntry] = `import '${slash(rendererName)}';`;
+    virtualModules[rendererInitEntry] = `import '${slash(rendererName)}';`;
+    entries.push(rendererInitEntry);
 
     const entryTemplate = await readTemplate(
-      join(__dirname, '..', 'templates', 'virtualModuleEntry.template.js')
+      require.resolve('@storybook/builder-webpack5/templates/virtualModuleEntry.template.js')
     );
 
     previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => {
@@ -87,25 +89,30 @@ export const getVirtualModuleMapping = async (options: Options) => {
         : `${previewAnnotationFilename}-generated-config-entry.js`;
       // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
       // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
-      virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {
+      virtualModules[entryFilename] = interpolate(entryTemplate, {
         previewAnnotationFilename,
       });
+      entries.push(entryFilename);
     });
     if (stories.length > 0) {
       const storyTemplate = await readTemplate(
-        join(__dirname, '..', 'templates', 'virtualModuleStory.template.js')
+        require.resolve('@storybook/builder-webpack5/templates/virtualModuleStory.template.js')
       );
       // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
       // in the user's webpack mode, which may be strict about the use of require/import.
       // See https://github.com/storybookjs/storybook/issues/14877
       const storiesFilename = resolve(join(workingDir, `generated-stories-entry.cjs`));
-      virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, {
+      virtualModules[storiesFilename] = interpolate(storyTemplate, {
         rendererName,
       })
         // Make sure we also replace quotes for this one
         .replace("'{{stories}}'", stories.map(toRequireContextString).join(','));
+      entries.push(storiesFilename);
     }
   }
 
-  return virtualModuleMapping;
+  return {
+    virtualModules,
+    entries,
+  };
 };

code/deprecated/addons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"

code/deprecated/channel-postmessage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/channel-websocket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "7.6.0-alpha.7",
+  "version": "7.6.0-beta.2",
   "description": "",
   "keywords": [
     "storybook"