Release: Prerelease 8.1.0-alpha.7

.circleci/config.yml

@@ -596,7 +596,7 @@ jobs:
           at: .
       - run:
           name: Install dependencies
-          command: yarn install
+          command: yarn install --no-immutable
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
       - run:
           name: Run Jest tests

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 8.0.6
+
+- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
+- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
+- Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
+- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
+
 ## 8.0.5
 
 - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 8.1.0-alpha.7
+
+- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
+- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!
+- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!
+- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!
+- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!
+- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!
+
 ## 8.1.0-alpha.6
 
 - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!

code/.eslintignore

@@ -17,4 +17,5 @@ ember-output
 !.eslintrc.js
 !.eslintrc-markdown.js
 !.storybook
-lib/core-common/templates/base-preview-head.html
+lib/core-common/templates/base-preview-head.html
+lib/core-server/src/utils/__search-files-tests__

code/addons/actions/src/loaders.ts

@@ -1,36 +1,26 @@
 /* eslint-disable no-underscore-dangle */
 import type { LoaderFunction } from '@storybook/types';
+import { global } from '@storybook/global';
+import type { onMockCall as onMockCallType } from '@storybook/test';
 import { action } from './runtime';
 
-export const tinySpyInternalState = Symbol.for('tinyspy:spy');
+let subscribed = false;
 
-const attachActionsToFunctionMocks: LoaderFunction = (context) => {
+const logActionsWhenMockCalled: LoaderFunction = (context) => {
   const {
-    args,
     parameters: { actions },
   } = context;
   if (actions?.disable) return;
 
-  Object.entries(args)
-    .filter(
-      ([, value]) =>
-        typeof value === 'function' && '_isMockFunction' in value && value._isMockFunction
-    )
-    .forEach(([key, value]) => {
-      // See this discussion for context:
-      // https://github.com/vitest-dev/vitest/pull/5352
-      const previous =
-        value.getMockImplementation() ??
-        (tinySpyInternalState in value ? value[tinySpyInternalState]?.getOriginal() : undefined);
-      if (previous?._actionAttached !== true && previous?.isAction !== true) {
-        const implementation = (...params: unknown[]) => {
-          action(key)(...params);
-          return previous?.(...params);
-        };
-        implementation._actionAttached = true;
-        value.mockImplementation(implementation);
-      }
-    });
+  if (
+    !subscribed &&
+    '__STORYBOOK_TEST_ON_MOCK_CALL__' in global &&
+    typeof global.__STORYBOOK_TEST_ON_MOCK_CALL__ === 'function'
+  ) {
+    const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType;
+    onMockCall((mock, args) => action(mock.getMockName())(args));
+    subscribed = true;
+  }
 };
 
-export const loaders: LoaderFunction[] = [attachActionsToFunctionMocks];
+export const loaders: LoaderFunction[] = [logActionsWhenMockCalled];

code/addons/actions/template/stories/spies.stories.ts

@@ -0,0 +1,24 @@
+import { global as globalThis } from '@storybook/global';
+import { spyOn } from '@storybook/test';
+
+export default {
+  component: globalThis.Components.Button,
+  loaders() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+  args: {
+    label: 'Button',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const ShowSpyOnInActions = {
+  args: {
+    onClick: () => {
+      console.log('first');
+      console.log('second');
+    },
+  },
+};

code/addons/gfm/README.md

@@ -6,6 +6,6 @@ The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Story
 > This addon will likely be removed in a future version.
 
 It's recommended you read this document and follow its instructions instead:
-https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
+https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
 
 Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.

code/addons/interactions/src/preview.ts

@@ -1,11 +1,4 @@
-import type {
-  ArgsEnhancer,
-  PlayFunction,
-  PlayFunctionContext,
-  Renderer,
-  StepLabel,
-} from '@storybook/types';
-import { fn, isMockFunction } from '@storybook/test';
+import type { PlayFunction, PlayFunctionContext, StepLabel } from '@storybook/types';
 import { instrument } from '@storybook/instrumenter';
 
 export const { step: runStep } = instrument(
@@ -16,50 +9,6 @@ export const { step: runStep } = instrument(
   { intercept: true }
 );
 
-export const traverseArgs = (value: unknown, depth = 0, key?: string): unknown => {
-  // Make sure to not get in infinite loops with self referencing args
-  if (depth > 5) return value;
-  if (value == null) return value;
-  if (isMockFunction(value)) {
-    // Makes sure we get the arg name in the interactions panel
-    if (key) value.mockName(key);
-    return value;
-  }
-
-  // wrap explicit actions in a spy
-  if (
-    typeof value === 'function' &&
-    'isAction' in value &&
-    value.isAction &&
-    !('implicit' in value && value.implicit)
-  ) {
-    const mock = fn(value as any);
-    if (key) mock.mockName(key);
-    return mock;
-  }
-
-  if (Array.isArray(value)) {
-    depth++;
-    return value.map((item) => traverseArgs(item, depth));
-  }
-
-  if (typeof value === 'object' && value.constructor === Object) {
-    depth++;
-    for (const [k, v] of Object.entries(value)) {
-      if (Object.getOwnPropertyDescriptor(value, k).writable) {
-        // We have to mutate the original object for this to survive HMR.
-        (value as Record<string, unknown>)[k] = traverseArgs(v, depth, k);
-      }
-    }
-    return value;
-  }
-  return value;
-};
-
-const wrapActionsInSpyFns: ArgsEnhancer<Renderer> = ({ initialArgs }) => traverseArgs(initialArgs);
-
-export const argsEnhancers = [wrapActionsInSpyFns];
-
 export const parameters = {
   throwPlayFunctionExceptions: false,
 };

code/builders/builder-webpack5/package.json

@@ -94,7 +94,7 @@
     "util": "^0.12.4",
     "util-deprecate": "^1.0.2",
     "webpack": "5",
-    "webpack-dev-middleware": "^6.1.1",
+    "webpack-dev-middleware": "^6.1.2",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-virtual-modules": "^0.5.0"
   },

code/e2e-tests/addon-actions.spec.ts

@@ -26,4 +26,26 @@ test.describe('addon-actions', () => {
     });
     await expect(logItem).toBeVisible();
   });
+
+  test('should show spies', async ({ page }) => {
+    test.skip(
+      templateName.includes('svelte') && templateName.includes('prerelease'),
+      'Svelte 5 prerelase does not support automatic actions with our current example components yet'
+    );
+    await page.goto(storybookUrl);
+    const sbPage = new SbPage(page);
+    sbPage.waitUntilLoaded();
+
+    await sbPage.navigateToStory('addons/actions/spies', 'show-spy-on-in-actions');
+
+    const root = sbPage.previewRoot();
+    const button = root.locator('button', { hasText: 'Button' });
+    await button.click();
+
+    await sbPage.viewAddonPanel('Actions');
+    const logItem = await page.locator('#storybook-panel-root #panel-tab-content', {
+      hasText: 'console.log',
+    });
+    await expect(logItem).toBeVisible();
+  });
 });

code/lib/cli/src/add.ts

@@ -48,6 +48,12 @@ const checkInstalled = (addonName: string, main: any) => {
 
 const isCoreAddon = (addonName: string) => Object.hasOwn(versions, addonName);
 
+type CLIOptions = {
+  packageManager?: PackageManagerName;
+  configDir?: string;
+  skipPostinstall: boolean;
+};
+
 /**
  * Install the given addon package and add it to main.js
  *
@@ -61,15 +67,18 @@ const isCoreAddon = (addonName: string) => Object.hasOwn(versions, addonName);
  */
 export async function add(
   addon: string,
-  options: { packageManager: PackageManagerName; skipPostinstall: boolean },
+  { packageManager: pkgMgr, skipPostinstall, configDir: userSpecifiedConfigDir }: CLIOptions,
   logger = console
 ) {
-  const { packageManager: pkgMgr } = options;
   const [addonName, inputVersion] = getVersionSpecifier(addon);
 
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
   const packageJson = await packageManager.retrievePackageJson();
-  const { mainConfig, configDir } = getStorybookInfo(packageJson);
+  const { mainConfig, configDir: inferredConfigDir } = getStorybookInfo(
+    packageJson,
+    userSpecifiedConfigDir
+  );
+  const configDir = userSpecifiedConfigDir || inferredConfigDir || '.storybook';
 
   if (typeof configDir === 'undefined') {
     throw new Error(dedent`
@@ -119,7 +128,7 @@ export async function add(
   main.appendValueToArray(['addons'], addonName);
   await writeConfig(main);
 
-  if (!options.skipPostinstall && isCoreAddon(addonName)) {
+  if (!skipPostinstall && isCoreAddon(addonName)) {
     await postinstallAddon(addonName, { packageManager: packageManager.type });
   }
 }

code/lib/cli/src/automigrate/fixes/index.ts

@@ -26,6 +26,7 @@ import { removeJestTestingLibrary } from './remove-jest-testing-library';
 import { addonsAPI } from './addons-api';
 import { mdx1to3 } from './mdx-1-to-3';
 import { addonPostCSS } from './addon-postcss';
+import { vta } from './vta';
 import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies';
 
 export * from '../types';
@@ -58,6 +59,7 @@ export const allFixes: Fix[] = [
   webpack5CompilerSetup,
   mdx1to3,
   upgradeStorybookRelatedDependencies,
+  vta,
 ];
 
 export const initFixes: Fix[] = [eslintPlugin];

code/lib/cli/src/automigrate/fixes/vta.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import type { StorybookConfig } from '@storybook/types';
+import { vta } from './vta';
+
+const check = async ({
+  packageManager,
+  main: mainConfig,
+  storybookVersion = '7.0.0',
+}: {
+  packageManager: any;
+  main: Partial<StorybookConfig> & Record<string, unknown>;
+  storybookVersion?: string;
+}) => {
+  return vta.check({
+    packageManager,
+    configDir: '',
+    mainConfig: mainConfig as any,
+    storybookVersion,
+  });
+};
+
+describe('no-ops', () => {
+  it('with addon setup', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          addons: ['@chromatic-com/storybook'],
+        },
+      })
+    ).resolves.toBeFalsy();
+  });
+  it('with addon setup with options', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          addons: [
+            {
+              name: '@chromatic-com/storybook',
+              options: {},
+            },
+          ],
+        },
+      })
+    ).resolves.toBeFalsy();
+  });
+});
+
+describe('continue', () => {
+  it('no addons', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          stories: ['**/*.stories.mdx'],
+        },
+      })
+    ).resolves.toBeTruthy();
+  });
+});