Release: Prerelease 9.2.0-alpha.3

CHANGELOG.md

@@ -203,7 +203,7 @@ This is a huge release focused on testing and bundle size.
 - 🌐 Story globals
 - 🏗️ Major upgrades: Svelte, Next, React Native, Angular
 
-Please checkout our [Migration guide](https://storybook.js.org/docs/9/migration-guide) to upgrade from earlier versions of Storybook. To see a comprehensive list of changes that went into 9.0, you can refer to the [9.0 prerelease changelogs](./CHANGELOG.prerelease.md)
+Please checkout our [Migration guide](https://storybook.js.org/docs/releases/migration-guide) to upgrade from earlier versions of Storybook. To see a comprehensive list of changes that went into 9.0, you can refer to the [9.0 prerelease changelogs](./CHANGELOG.prerelease.md)
 
 <details>
 <summary>List of all updates</summary>

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 9.2.0-alpha.3
+
+- Addon Docs: Fix Symbol conversion issue in docs page and controls panel - [#32220](https://github.com/storybookjs/storybook/pull/32220), thanks @yannbf!
+- Angular: Fix `entry.polyfills` undefined error - [#32230](https://github.com/storybookjs/storybook/pull/32230), thanks @sk-pub!
+- Angular: Inherit options from browserTarget - [#32108](https://github.com/storybookjs/storybook/pull/32108), thanks @gingeekrishna!
+- Core: Improve addon detection in automigrations on windows - [#31937](https://github.com/storybookjs/storybook/pull/31937), thanks @mrginglymus!
+- Mock: Catch errors when transforming preview files - [#32216](https://github.com/storybookjs/storybook/pull/32216), thanks @valentinpalkovic!
+- Next.js: Return mocked router instead of actual router in useRouter - [#32131](https://github.com/storybookjs/storybook/pull/32131), thanks @JulioJ11!
+- Telemetry: Improve dev cancellation handling - [#32218](https://github.com/storybookjs/storybook/pull/32218), thanks @shilman!
+
 ## 9.2.0-alpha.2
 
 - Onboarding: Tweak referral wording in survey - [#32185](https://github.com/storybookjs/storybook/pull/32185), thanks @shilman!

README.md

@@ -108,7 +108,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [Svelte](code/renderers/svelte)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://next--630873996e4e3557791c069c.chromatic.com/)         | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte)                                       |
 | [Preact](code/renderers/preact)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://next--63b588a512565bfaace15e7c.chromatic.com/)         | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact)                                       |
 | [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/)                                                                    | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) |
-| [SolidJS](https://github.com/storybookjs/solidjs)              | [![](https://img.shields.io/npm/v/storybook-solidjs/latest?style=flat-square&color=blue&label)](/)                                                                           | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs?style=flat-square&color=eee)](https://github.com/storybookjs/solidjs)                     |
+| [SolidJS](https://github.com/solidjs-community/storybook)              | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](/)                                                                           | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook)                     |
 | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/)                                                                           | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                       |
 
 ### Addons

code/addons/a11y/package.json

@@ -100,7 +100,7 @@
       "./src/postinstall.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

code/addons/docs/package.json

@@ -162,7 +162,7 @@
       "./src/manager.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx

@@ -335,7 +335,7 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
-        'aria-label': `remove the array '${name}'`,
+        'aria-label': `remove the array '${String(name)}'`,
       });
 
     return (
@@ -379,15 +379,15 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
         onClick: this.handleAddMode,
         className: 'rejt-plus-menu',
         style: plus,
-        'aria-label': `add a new item to the '${name}' array`,
+        'aria-label': `add a new item to the '${String(name)}' array`,
       });
     const removeItemButton =
       minusMenuElement &&
       cloneElement(minusMenuElement, {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
-        'aria-label': `remove the array '${name}'`,
+        'aria-label': `remove the array '${String(name)}'`,
       });
 
     const onlyValue = true;
@@ -670,8 +670,8 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
           onClick: handleRemove,
           className: 'rejt-minus-menu',
           style: style.minus,
-          'aria-label': `remove the function '${name}'${
-            parentPropertyName ? ` from '${parentPropertyName}'` : ''
+          'aria-label': `remove the function '${String(name)}'${
+            String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ''
           }`,
         });
       minusElement = resultOnlyResult ? null : minusMenuLayout;
@@ -1222,7 +1222,7 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
-        'aria-label': `remove the object '${name}'`,
+        'aria-label': `remove the object '${String(name)}'`,
       });
 
     return (
@@ -1268,15 +1268,15 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
         onClick: this.handleAddMode,
         className: 'rejt-plus-menu',
         style: plus,
-        'aria-label': `add a new property to the object '${name}'`,
+        'aria-label': `add a new property to the object '${String(name)}'`,
       });
     const removeItemButton =
       minusMenuElement &&
       cloneElement(minusMenuElement, {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
-        'aria-label': `remove the object '${name}'`,
+        'aria-label': `remove the object '${String(name)}'`,
       });
 
     const list = keyList.map((key) => (
@@ -1540,8 +1540,8 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: style.minus,
-        'aria-label': `remove the property '${name}' with value '${originalValue}'${
-          parentPropertyName ? ` from '${parentPropertyName}'` : ''
+        'aria-label': `remove the property '${String(name)}' with value '${String(originalValue)}'${
+          String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ''
         }`,
       });
 

code/addons/jest/package.json

@@ -76,7 +76,7 @@
       "./src/manager.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
   "storybook": {
     "displayName": "Jest",
     "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

code/addons/links/package.json

@@ -98,7 +98,7 @@
     ],
     "post": "./scripts/fix-preview-api-reference.ts"
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
   "storybook": {
     "displayName": "Links",
     "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

code/addons/themes/package.json

@@ -91,7 +91,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
   "storybook": {
     "displayName": "Themes",
     "unsupportedFrameworks": [

code/builders/builder-vite/package.json

@@ -71,5 +71,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684"
 }

code/builders/builder-webpack5/package.json

@@ -108,5 +108,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684"
 }

code/core/src/cli/project_types.ts

@@ -20,7 +20,12 @@ export type ExternalFramework = {
 
 export const externalFrameworks: ExternalFramework[] = [
   { name: 'qwik', packageName: 'storybook-framework-qwik' },
-  { name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' },
+  {
+    name: 'solid',
+    packageName: 'storybook-solidjs-vite',
+    frameworks: ['storybook-solidjs-vite'],
+    renderer: 'storybook-solidjs-vite',
+  },
   {
     name: 'nuxt',
     packageName: '@storybook-vue/nuxt',

code/core/src/common/utils/get-addon-names.test.ts

@@ -42,6 +42,18 @@ describe('getAddonNames', () => {
     expect(result).toEqual(['@storybook/addon-highlight', '@storybook/addon-outline']);
   });
 
+  it('should extract addon names from windows absolute paths', () => {
+    const config = {
+      stories: [],
+      addons: [
+        '\\sandbox\\react-vite-default-ts\\node_modules\\@storybook\\addon-highlight',
+        '\\sandbox\\react-vite-default-ts\\node_modules\\@storybook\\addon-outline',
+      ],
+    };
+    const result = getAddonNames(config);
+    expect(result).toEqual(['@storybook/addon-highlight', '@storybook/addon-outline']);
+  });
+
   it('should extract addon names from pnpm paths', () => {
     const config = {
       stories: [],

code/core/src/common/utils/get-addon-names.ts

@@ -1,5 +1,7 @@
 import type { StorybookConfig } from 'storybook/internal/types';
 
+import { normalizePath } from './normalize-path';
+
 export const getAddonNames = (mainConfig: StorybookConfig): string[] => {
   const addons = mainConfig.addons || [];
   const addonList = addons.map((addon) => {
@@ -14,6 +16,9 @@ export const getAddonNames = (mainConfig: StorybookConfig): string[] => {
       return undefined;
     }
 
+    // Ensure posix paths for plugin name sniffing
+    name = normalizePath(name);
+
     // For absolute paths, pnpm and yarn pnp,
     // Remove everything before and including "node_modules/"
     name = name.replace(/.*node_modules\//, '');

code/core/src/common/utils/get-storybook-info.ts

@@ -21,7 +21,7 @@ export const rendererPackages: Record<string, string> = {
 
   // community (outside of monorepo)
   'storybook-framework-qwik': 'qwik',
-  'storybook-solidjs': 'solid',
+  'storybook-solidjs-vite': 'solid',
 
   /** @deprecated This is deprecated. */
   '@storybook/vue': 'vue',

code/core/src/core-server/dev-server.ts

@@ -151,6 +151,7 @@ export async function storybookDevServer(options: Options) {
 
   if (!core?.disableTelemetry) {
     process.on('SIGINT', cancelTelemetry);
+    process.on('SIGTERM', cancelTelemetry);
   }
 
   return { previewResult, managerResult, address, networkAddress };

code/core/src/core-server/presets/vitePlugins/vite-mock/plugin.ts

@@ -167,7 +167,12 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
       name: 'storybook:mock-loader-preview',
       transform(code, id) {
         if (id === normalizedPreviewConfigPath) {
-          return rewriteSbMockImportCalls(code);
+          try {
+            return rewriteSbMockImportCalls(code);
+          } catch (e) {
+            logger.debug(`Could not transform sb.mock(import(...)) calls in ${id}: ${e}`);
+            return null;
+          }
         }
         return null;
       },

code/core/src/core-server/presets/webpack/loaders/storybook-mock-transform-loader.ts

@@ -1,15 +1,30 @@
-import type { LoaderContext } from 'webpack';
+import { logger } from 'storybook/internal/node-logger';
+
+import type { LoaderDefinition } from 'webpack';
 
 import { rewriteSbMockImportCalls } from '../../../mocking-utils/extract';
 
 /**
  * A Webpack loader that normalize sb.mock(import(...)) calls to sb.mock(...)
  *
- * @param {string} source The original source code of the preview config file.
- * @this {LoaderContext<{}>} The Webpack loader context.
+ * @param source The original source code of the preview config file.
+ * @this The Webpack loader context.
  */
-export default function storybookMockTransformLoader(this: LoaderContext<{}>, source: string) {
-  const result = rewriteSbMockImportCalls(source);
+const storybookMockTransformLoader: LoaderDefinition = function mockTransformLoaderFn(
+  source,
+  sourceMap,
+  meta
+) {
   const callback = this.async();
-  callback(null, result.code, result.map || undefined);
-}
+
+  try {
+    const result = rewriteSbMockImportCalls(source);
+    callback(null, result.code, result.map || undefined, meta);
+  } catch (error) {
+    const filePath = this.resourcePath;
+    logger.debug(`Could not transform sb.mock(import(...)) calls in ${filePath}: ${error}`);
+    callback(null, source, sourceMap, meta);
+  }
+};
+
+export default storybookMockTransformLoader;

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

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import process from 'process';
 
-import { SbPage } from './util';
+import { SbPage, isReactSandbox } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
@@ -103,4 +103,15 @@ test.describe('addon-controls', () => {
 
     await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/);
   });
+
+  // We want to avoid the controls panel crashing when JSX elements are part of args table
+  test('should show JSX elements in controls panel', async ({ page }) => {
+    test.skip(!isReactSandbox(templateName), 'This is a React only feature');
+    await page.goto(`${storybookUrl}?path=/story/stories-renderers-react-jsx-docgen--default`);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.waitUntilLoaded();
+    await sbPage.viewAddonPanel('Controls');
+    await expect(sbPage.panelContent().getByText('children').first()).toBeVisible();
+  });
 });

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

@@ -5,7 +5,7 @@ import { expect, test } from '@playwright/test';
 import process from 'process';
 import { dedent } from 'ts-dedent';
 
-import { SbPage } from './util';
+import { SbPage, isReactSandbox } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
@@ -280,4 +280,14 @@ test.describe('addon-docs', () => {
       'H 2 Content',
     ]);
   });
+
+  // We want to avoid the docs page crashing when JSX elements are part of args table
+  test('should show JSX elements in docs page', async ({ page }) => {
+    test.skip(!isReactSandbox(templateName), 'This is a React only feature');
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.navigateToStory('/stories/renderers/react/jsx-docgen', 'docs');
+    const root = sbPage.previewRoot();
+    await expect(root.getByText('children').first()).toBeVisible();
+  });
 });

code/e2e-tests/util.ts

@@ -205,6 +205,10 @@ export class SbPage {
 const templateName: keyof typeof allTemplates = process.env.STORYBOOK_TEMPLATE_NAME || ('' as any);
 
 const templates = allTemplates;
+
+export const isReactSandbox = (templateName: string) =>
+  templates[templateName as keyof typeof templates]?.expected.renderer === '@storybook/react';
+
 export const hasVitestIntegration =
   !templates[templateName]?.skipTasks?.includes('vitest-integration');
 

code/frameworks/angular/package.json

@@ -169,5 +169,5 @@
       "./src/builders/build-storybook/index.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684"
 }

code/frameworks/angular/src/server/angular-cli-webpack.js

@@ -158,6 +158,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
   );
 
   if (!builderOptions.experimentalZoneless && !cliConfig.entry.polyfills?.includes('zone.js')) {
+    cliConfig.entry.polyfills ??= [];
     cliConfig.entry.polyfills.push('zone.js');
   }