Release: Prerelease 8.2.0-alpha.9

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.1.8
+
+- Automigrations: Make VTA "learn more" link clickable - [#28020](https://github.com/storybookjs/storybook/pull/28020), thanks @deiga!
+- CLI: Fix `init --skip-install` - [#28226](https://github.com/storybookjs/storybook/pull/28226), thanks @shilman!
+
 ## 8.1.7
 
 - Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 8.2.0-alpha.9
+
+- Addon-a11y: Workaround for Vite 5.3.0 compat - [#28241](https://github.com/storybookjs/storybook/pull/28241), thanks @shilman!
+- CLI: Fix CLI always asking all automigrations - [#28238](https://github.com/storybookjs/storybook/pull/28238), thanks @ndelangen!
+- Core: Fix startup hang caused by watchStorySpecifiers - [#27016](https://github.com/storybookjs/storybook/pull/27016), thanks @heyimalex!
+
 ## 8.2.0-alpha.8
 
 - Automigrations: Make VTA "learn more" link clickable - [#28020](https://github.com/storybookjs/storybook/pull/28020), thanks @deiga!

code/addons/a11y/src/a11yRunner.ts

@@ -29,7 +29,7 @@ const run = async (storyId: string, input: A11yParameters = defaultParameters) =
     if (!active) {
       active = true;
       channel.emit(EVENTS.RUNNING);
-      const axe = (await import('axe-core')).default;
+      const { default: axe } = await import('axe-core');
 
       const { element = '#storybook-root', config, options = {} } = input;
       const htmlElement = document.querySelector(element as string);

code/lib/cli/src/upgrade.ts

@@ -130,55 +130,59 @@ export const doUpgrade = async ({
   // If we can't determine the existing version fallback to v0.0.0 to not block the upgrade
   const beforeVersion = (await getInstalledStorybookVersion(packageManager)) ?? '0.0.0';
 
-  const currentVersion = versions['@storybook/cli'];
+  const currentCLIVersion = versions['@storybook/cli'];
   const isCanary =
-    currentVersion.startsWith('0.0.0') ||
+    currentCLIVersion.startsWith('0.0.0') ||
     beforeVersion.startsWith('portal:') ||
     beforeVersion.startsWith('workspace:');
 
   if (!(await hasStorybookDependencies(packageManager))) {
     throw new UpgradeStorybookInWrongWorkingDirectory();
   }
-  if (!isCanary && lt(currentVersion, beforeVersion)) {
-    throw new UpgradeStorybookToLowerVersionError({ beforeVersion, currentVersion });
+  if (!isCanary && lt(currentCLIVersion, beforeVersion)) {
+    throw new UpgradeStorybookToLowerVersionError({
+      beforeVersion,
+      currentVersion: currentCLIVersion,
+    });
   }
 
-  if (!isCanary && eq(currentVersion, beforeVersion)) {
+  if (!isCanary && eq(currentCLIVersion, beforeVersion)) {
     // Not throwing, as the beforeVersion calculation doesn't always work in monorepos.
     logger.warn(new UpgradeStorybookToSameVersionError({ beforeVersion }).message);
   }
 
-  const [latestVersion, packageJson] = await Promise.all([
-    //
+  const [latestCLIVersionOnNPM, packageJson] = await Promise.all([
     packageManager.latestVersion('@storybook/cli'),
     packageManager.retrievePackageJson(),
   ]);
 
-  const isOutdated = lt(currentVersion, latestVersion);
-  const isExactLatest = currentVersion === latestVersion;
-  const isPrerelease = prerelease(currentVersion) !== null;
+  const isCLIOutdated = lt(currentCLIVersion, latestCLIVersionOnNPM);
+  const isCLIExactLatest = currentCLIVersion === latestCLIVersionOnNPM;
+  const isCLIPrerelease = prerelease(currentCLIVersion) !== null;
+
+  const isUpgrade = lt(beforeVersion, currentCLIVersion);
 
-  const borderColor = isOutdated ? '#FC521F' : '#F1618C';
+  const borderColor = isCLIOutdated ? '#FC521F' : '#F1618C';
 
   const messages = {
     welcome: `Upgrading Storybook from version ${chalk.bold(beforeVersion)} to version ${chalk.bold(
-      currentVersion
+      currentCLIVersion
     )}..`,
     notLatest: chalk.red(dedent`
-      This version is behind the latest release, which is: ${chalk.bold(latestVersion)}!
+      This version is behind the latest release, which is: ${chalk.bold(latestCLIVersionOnNPM)}!
       You likely ran the upgrade command through npx, which can use a locally cached version, to upgrade to the latest version please run:
       ${chalk.bold('npx storybook@latest upgrade')}
 
       You may want to CTRL+C to stop, and run with the latest version instead.
     `),
-    prelease: chalk.yellow('This is a pre-release version.'),
+    prerelease: chalk.yellow('This is a pre-release version.'),
   };
 
   logger.plain(
     boxen(
       [messages.welcome]
-        .concat(isOutdated && !isPrerelease ? [messages.notLatest] : [])
-        .concat(isPrerelease ? [messages.prelease] : [])
+        .concat(isCLIOutdated && !isCLIPrerelease ? [messages.notLatest] : [])
+        .concat(isCLIPrerelease ? [messages.prerelease] : [])
         .join('\n'),
       { borderStyle: 'round', padding: 1, borderColor }
     )
@@ -227,7 +231,7 @@ export const doUpgrade = async ({
       }) as Array<keyof typeof versions>;
       return monorepoDependencies.map((dependency) => {
         let char = '^';
-        if (isOutdated) {
+        if (isCLIOutdated) {
           char = '';
         }
         if (isCanary) {
@@ -268,9 +272,9 @@ export const doUpgrade = async ({
       configDir,
       mainConfigPath,
       beforeVersion,
-      storybookVersion: currentVersion,
-      isUpgrade: isOutdated,
-      isLatest: isExactLatest,
+      storybookVersion: currentCLIVersion,
+      isUpgrade,
+      isLatest: isCLIExactLatest,
     });
   }
 
@@ -284,7 +288,7 @@ export const doUpgrade = async ({
 
     await telemetry('upgrade', {
       beforeVersion,
-      afterVersion: currentVersion,
+      afterVersion: currentCLIVersion,
       ...automigrationTelemetry,
     });
   }

code/lib/core-server/src/utils/stories-json.test.ts

@@ -356,12 +356,17 @@ describe('useStoriesJson', () => {
 
       expect(Watchpack).toHaveBeenCalledTimes(1);
       const watcher = Watchpack.mock.instances[0];
-      expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src'] });
+      expect(watcher.watch).toHaveBeenCalledWith(
+        expect.objectContaining({
+          directories: expect.any(Array),
+          files: expect.any(Array),
+        })
+      );
 
       expect(watcher.on).toHaveBeenCalledTimes(2);
       const onChange = watcher.on.mock.calls[0][1];
 
-      await onChange('src/nested/Button.stories.ts');
+      await onChange(`${workingDir}/src/nested/Button.stories.ts`);
       expect(mockServerChannel.emit).toHaveBeenCalledTimes(1);
       expect(mockServerChannel.emit).toHaveBeenCalledWith(STORY_INDEX_INVALIDATED);
     });
@@ -389,12 +394,17 @@ describe('useStoriesJson', () => {
 
       expect(Watchpack).toHaveBeenCalledTimes(1);
       const watcher = Watchpack.mock.instances[0];
-      expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src'] });
+      expect(watcher.watch).toHaveBeenCalledWith(
+        expect.objectContaining({
+          directories: expect.any(Array),
+          files: expect.any(Array),
+        })
+      );
 
       expect(watcher.on).toHaveBeenCalledTimes(2);
       const onChange = watcher.on.mock.calls[0][1];
 
-      await onChange('src/nested/Button.stories.ts');
+      await onChange(`${workingDir}/src/nested/Button.stories.ts`);
       expect(mockServerChannel.emit).toHaveBeenCalledTimes(1);
       expect(mockServerChannel.emit).toHaveBeenCalledWith(STORY_INDEX_INVALIDATED);
     });
@@ -423,16 +433,21 @@ describe('useStoriesJson', () => {
 
       expect(Watchpack).toHaveBeenCalledTimes(1);
       const watcher = Watchpack.mock.instances[0];
-      expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src'] });
+      expect(watcher.watch).toHaveBeenCalledWith(
+        expect.objectContaining({
+          directories: expect.any(Array),
+          files: expect.any(Array),
+        })
+      );
 
       expect(watcher.on).toHaveBeenCalledTimes(2);
       const onChange = watcher.on.mock.calls[0][1];
 
-      await onChange('src/nested/Button.stories.ts');
-      await onChange('src/nested/Button.stories.ts');
-      await onChange('src/nested/Button.stories.ts');
-      await onChange('src/nested/Button.stories.ts');
-      await onChange('src/nested/Button.stories.ts');
+      await onChange(`${workingDir}/src/nested/Button.stories.ts`);
+      await onChange(`${workingDir}/src/nested/Button.stories.ts`);
+      await onChange(`${workingDir}/src/nested/Button.stories.ts`);
+      await onChange(`${workingDir}/src/nested/Button.stories.ts`);
+      await onChange(`${workingDir}/src/nested/Button.stories.ts`);
 
       expect(mockServerChannel.emit).toHaveBeenCalledTimes(1);
       expect(mockServerChannel.emit).toHaveBeenCalledWith(STORY_INDEX_INVALIDATED);

code/lib/core-server/src/utils/watch-story-specifiers.test.ts

@@ -13,6 +13,7 @@ describe('watchStorySpecifiers', () => {
     configDir: path.join(workingDir, '.storybook'),
     workingDir,
   };
+  const abspath = (filename: string) => path.join(workingDir, filename);
 
   let close: () => void;
   afterEach(() => close?.());
@@ -25,11 +26,18 @@ describe('watchStorySpecifiers', () => {
 
     expect(Watchpack).toHaveBeenCalledTimes(1);
     const watcher = Watchpack.mock.instances[0];
-    expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src'] });
+    expect(watcher.watch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        directories: expect.any(Array),
+        files: expect.any(Array),
+      })
+    );
 
     expect(watcher.on).toHaveBeenCalledTimes(2);
-    const onChange = watcher.on.mock.calls[0][1];
-    const onRemove = watcher.on.mock.calls[1][1];
+    const baseOnChange = watcher.on.mock.calls[0][1];
+    const baseOnRemove = watcher.on.mock.calls[1][1];
+    const onChange = (filename: string, ...args: any[]) => baseOnChange(abspath(filename), ...args);
+    const onRemove = (filename: string, ...args: any[]) => baseOnRemove(abspath(filename), ...args);
 
     // File changed, matching
     onInvalidate.mockClear();
@@ -72,10 +80,16 @@ describe('watchStorySpecifiers', () => {
 
     expect(Watchpack).toHaveBeenCalledTimes(1);
     const watcher = Watchpack.mock.instances[0];
-    expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src'] });
+    expect(watcher.watch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        directories: expect.any(Array),
+        files: expect.any(Array),
+      })
+    );
 
     expect(watcher.on).toHaveBeenCalledTimes(2);
-    const onChange = watcher.on.mock.calls[0][1];
+    const baseOnChange = watcher.on.mock.calls[0][1];
+    const onChange = (filename: string, ...args: any[]) => baseOnChange(abspath(filename), ...args);
 
     onInvalidate.mockClear();
     await onChange('src/nested', 1234);
@@ -90,11 +104,18 @@ describe('watchStorySpecifiers', () => {
 
     expect(Watchpack).toHaveBeenCalledTimes(1);
     const watcher = Watchpack.mock.instances[0];
-    expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src/nested'] });
+    expect(watcher.watch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        directories: expect.any(Array),
+        files: expect.any(Array),
+      })
+    );
 
     expect(watcher.on).toHaveBeenCalledTimes(2);
-    const onChange = watcher.on.mock.calls[0][1];
-    const onRemove = watcher.on.mock.calls[1][1];
+    const baseOnChange = watcher.on.mock.calls[0][1];
+    const baseOnRemove = watcher.on.mock.calls[1][1];
+    const onChange = (filename: string, ...args: any[]) => baseOnChange(abspath(filename), ...args);
+    const onRemove = (filename: string, ...args: any[]) => baseOnRemove(abspath(filename), ...args);
 
     // File changed, matching
     onInvalidate.mockClear();
@@ -131,10 +152,16 @@ describe('watchStorySpecifiers', () => {
 
     expect(Watchpack).toHaveBeenCalledTimes(1);
     const watcher = Watchpack.mock.instances[0];
-    expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src', './src/nested'] });
+    expect(watcher.watch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        directories: expect.any(Array),
+        files: expect.any(Array),
+      })
+    );
 
     expect(watcher.on).toHaveBeenCalledTimes(2);
-    const onChange = watcher.on.mock.calls[0][1];
+    const baseOnChange = watcher.on.mock.calls[0][1];
+    const onChange = (filename: string, ...args: any[]) => baseOnChange(abspath(filename), ...args);
 
     onInvalidate.mockClear();
     await onChange('src/nested/Button.stories.ts', 1234);