Release: Patch 7.4.3

.github/workflows/generate-sandboxes-main.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main

.github/workflows/generate-sandboxes-next.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.4.3
+
+- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!
+- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 7.4.2
 
 - Addon API: Improve the updateStatus API - [#24007](https://github.com/storybookjs/storybook/pull/24007), thanks [@ndelangen](https://github.com/ndelangen)!

code/frameworks/nextjs/src/config/webpack.ts

@@ -5,6 +5,14 @@ import type { NextConfig } from 'next';
 import { DefinePlugin } from 'webpack';
 import { addScopedAlias, getNextjsVersion, resolveNextConfig } from '../utils';
 
+const tryResolve = (path: string) => {
+  try {
+    return require.resolve(path);
+  } catch (err) {
+    return false;
+  }
+};
+
 export const configureConfig = async ({
   baseConfig,
   nextConfigPath,
@@ -17,6 +25,12 @@ export const configureConfig = async ({
   const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
 
   addScopedAlias(baseConfig, 'next/config');
+  if (tryResolve('next/dist/compiled/react')) {
+    addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
+  }
+  if (tryResolve('next/dist/compiled/react-dom')) {
+    addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
+  }
   setupRuntimeConfig(baseConfig, nextConfig);
 
   return nextConfig;

code/frameworks/nextjs/src/dependency-map.ts

@@ -0,0 +1,36 @@
+import type { Configuration as WebpackConfig } from 'webpack';
+import semver from 'semver';
+import { getNextjsVersion, addScopedAlias } from './utils';
+
+const mapping: Record<string, Record<string, string>> = {
+  '<11.1.0': {
+    'next/dist/next-server/lib/router-context': 'next/dist/next-server/lib/router-context',
+  },
+  '>=11.1.0': {
+    'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context',
+  },
+  '>=13.5.0': {
+    'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context.shared-runtime',
+    'next/dist/shared/lib/head-manager-context':
+      'next/dist/shared/lib/head-manager-context.shared-runtime',
+    'next/dist/shared/lib/app-router-context':
+      'next/dist/shared/lib/app-router-context.shared-runtime',
+    'next/dist/shared/lib/hooks-client-context':
+      'next/dist/shared/lib/hooks-client-context.shared-runtime',
+  },
+};
+
+export const configureAliasing = (baseConfig: WebpackConfig): void => {
+  const version = getNextjsVersion();
+  const result: Record<string, string> = {};
+
+  Object.keys(mapping).forEach((key) => {
+    if (semver.intersects(version, key)) {
+      Object.assign(result, mapping[key]);
+    }
+  });
+
+  Object.entries(result).forEach(([name, alias]) => {
+    addScopedAlias(baseConfig, name, alias);
+  });
+};

code/frameworks/nextjs/src/preset.ts

@@ -7,7 +7,6 @@ import { getProjectRoot } from '@storybook/core-common';
 import { configureConfig } from './config/webpack';
 import { configureCss } from './css/webpack';
 import { configureImports } from './imports/webpack';
-import { configureRouting } from './routing/webpack';
 import { configureStyledJsx } from './styledJsx/webpack';
 import { configureImages } from './images/webpack';
 import { configureRuntimeNextjsVersionResolution } from './utils';
@@ -17,6 +16,7 @@ import TransformFontImports from './font/babel';
 import { configureNextFont } from './font/webpack/configureNextFont';
 import nextBabelPreset from './babel/preset';
 import { configureNodePolyfills } from './nodePolyfills/webpack';
+import { configureAliasing } from './dependency-map';
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@@ -143,13 +143,13 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
     configDir: options.configDir,
   });
 
+  configureAliasing(baseConfig);
   configureNextFont(baseConfig);
   configureNextImport(baseConfig);
   configureRuntimeNextjsVersionResolution(baseConfig);
   configureImports({ baseConfig, configDir: options.configDir });
   configureCss(baseConfig, nextConfig);
   configureImages(baseConfig, nextConfig);
-  configureRouting(baseConfig);
   configureStyledJsx(baseConfig);
   configureNodePolyfills(baseConfig);
 

code/lib/cli/src/add.ts

@@ -1,6 +1,8 @@
-import { getStorybookInfo } from '@storybook/core-common';
+import { getStorybookInfo, serverRequire } from '@storybook/core-common';
 import { readConfig, writeConfig } from '@storybook/csf-tools';
+import { isAbsolute, join } from 'path';
 import SemVer from 'semver';
+import dedent from 'ts-dedent';
 
 import {
   JsPackageManagerFactory,
@@ -38,6 +40,21 @@ const getVersionSpecifier = (addon: string) => {
   return groups ? [groups[1], groups[2]] : [addon, undefined];
 };
 
+const requireMain = (configDir: string) => {
+  const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
+  const mainFile = join(absoluteConfigDir, 'main');
+
+  return serverRequire(mainFile) ?? {};
+};
+
+const checkInstalled = (addonName: string, main: any) => {
+  const existingAddon = main.addons?.find((entry: string | { name: string }) => {
+    const name = typeof entry === 'string' ? entry : entry.name;
+    return name?.endsWith(addonName);
+  });
+  return !!existingAddon;
+};
+
 /**
  * Install the given addon package and add it to main.js
  *
@@ -60,9 +77,16 @@ export async function add(
   }
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
   const packageJson = await packageManager.retrievePackageJson();
+  const { mainConfig, configDir } = getStorybookInfo(packageJson);
+
+  if (checkInstalled(addon, requireMain(configDir))) {
+    throw new Error(dedent`
+      Addon ${addon} is already installed; we skipped adding it to your ${mainConfig}.
+    `);
+  }
+
   const [addonName, versionSpecifier] = getVersionSpecifier(addon);
 
-  const { mainConfig } = getStorybookInfo(packageJson);
   if (!mainConfig) {
     logger.error('Unable to find storybook main.js config');
     return;

code/lib/cli/src/sandbox-templates.ts

@@ -285,7 +285,7 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
-    // TODO: Can be enabled once we re-revert this PR: https://github.com/storybookjs/storybook/pull/24033
+    // TODO: Should be removed after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
     inDevelopment: true,
   },
   'angular-cli/default-ts': {
@@ -575,7 +575,8 @@ export const merged: TemplateKey[] = [
 ];
 export const daily: TemplateKey[] = [
   ...merged,
-  'angular-cli/prerelease',
+  // TODO: Should be re-added after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
+  // 'angular-cli/prerelease',
   'cra/default-js',
   'react-vite/default-js',
   'vue3-vite/default-js',

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

@@ -100,7 +100,7 @@ const getConfigInfo = (packageJson: PackageJson, configDir?: string) => {
   }
 
   return {
-    configDir,
+    configDir: storybookConfigDir,
     mainConfig: findConfigFile('main', storybookConfigDir),
     previewConfig: findConfigFile('preview', storybookConfigDir),
     managerConfig: findConfigFile('manager', storybookConfigDir),

code/lib/types/src/modules/api-stories.ts

@@ -183,7 +183,7 @@ export interface API_StatusObject {
 }
 
 export type API_StatusState = Record<StoryId, Record<string, API_StatusObject>>;
-export type API_StatusUpdate = Record<StoryId, API_StatusObject>;
+export type API_StatusUpdate = Record<StoryId, API_StatusObject | null>;
 
 export type API_FilterFunction = (
   item: API_PreparedIndexEntry & { status: Record<string, API_StatusObject | null> }

code/package.json

@@ -327,5 +327,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.4.3"
 }

code/ui/blocks/src/components/Story.tsx

@@ -64,9 +64,6 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
     };
   }, [autoplay, renderStoryToElement, story]);
 
-  // We do this so React doesn't complain when we replace the span in a secondary render
-  const htmlContents = `<span></span>`;
-
   if (error) {
     return (
       <pre>
@@ -83,13 +80,7 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
         )} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
       ) : null}
       {showLoader && <StorySkeleton />}
-      <div
-        ref={storyRef}
-        id={`${storyBlockIdFromId(props)}-inner`}
-        data-name={story.name}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: htmlContents }}
-      />
+      <div ref={storyRef} id={`${storyBlockIdFromId(props)}-inner`} data-name={story.name} />
     </>
   );
 };

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"7.4.2","info":{"plain":"- Addon API: Improve the updateStatus API - [#24007](https://github.com/storybookjs/storybook/pull/24007), thanks [@ndelangen](https://github.com/ndelangen)!\n- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)!"}}
+{"version":"7.4.3","info":{"plain":"- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!\n- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!"}}

scripts/sandbox/generate.ts

@@ -202,11 +202,16 @@ const runGenerators = async (
 };
 
 export const options = createOptions({
-  template: {
-    type: 'string',
-    description: 'Which template would you like to create?',
+  templates: {
+    type: 'string[]',
+    description: 'Which templates would you like to create?',
     values: Object.keys(sandboxTemplates),
   },
+  exclude: {
+    type: 'string[]',
+    description: 'Space-delimited list of templates to exclude. Takes precedence over --templates',
+    promptType: false,
+  },
   localRegistry: {
     type: 'boolean',
     description: 'Generate reproduction from local registry?',
@@ -220,7 +225,8 @@ export const options = createOptions({
 });
 
 export const generate = async ({
-  template,
+  templates,
+  exclude,
   localRegistry,
   debug,
 }: OptionValues<typeof options>) => {
@@ -230,11 +236,11 @@ export const generate = async ({
       ...configuration,
     }))
     .filter(({ dirName }) => {
-      if (template) {
-        return dirName === template;
+      let include = Array.isArray(templates) ? templates.includes(dirName) : true;
+      if (Array.isArray(exclude) && include) {
+        include = !exclude.includes(dirName);
       }
-
-      return true;
+      return include;
     });
 
   await runGenerators(generatorConfigs, localRegistry, debug);
@@ -243,7 +249,11 @@ export const generate = async ({
 if (require.main === module) {
   program
     .description('Generate sandboxes from a set of possible templates')
-    .option('--template <template>', 'Create a single template')
+    .option('--templates [templates...]', 'Space-delimited list of templates to include')
+    .option(
+      '--exclude [templates...]',
+      'Space-delimited list of templates to exclude. Takes precedence over --templates'
+    )
     .option('--debug', 'Print all the logs to the console')
     .option('--local-registry', 'Use local registry', false)
     .action((optionValues) => {

scripts/tasks/generate.ts

@@ -30,7 +30,8 @@ export const generate: Task = {
     const { generate: generateRepro } = await import('../sandbox/generate');
 
     await generateRepro({
-      template: details.key,
+      templates: [details.key],
+      exclude: [],
       localRegistry: true,
       debug: options.debug,
     });