Merge branch 'next' of github.com:storybookjs/storybook into next

MIGRATION.md

@@ -35,7 +35,7 @@
     - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
   - [7.0 Vite changes](#70-vite-changes)
     - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
   - [7.0 Webpack changes](#70-webpack-changes)
     - [Webpack4 support discontinued](#webpack4-support-discontinued)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -82,7 +82,7 @@
     - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
-    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
     - [parameters.docs.source.excludeDecorators defaults to true](#parametersdocssourceexcludedecorators-defaults-to-true)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
@@ -297,7 +297,7 @@
 
 ## From version 6.5.x to 7.0.0
 
-A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@next upgrade --prerelease` or `pnpx storybook@next upgrade --prerelease`.
+A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx storybook@latest upgrade --prerelease`.
 
 ### 7.0 breaking changes
 
@@ -610,7 +610,7 @@ _Has automigration_
 Storybook 7 introduces the concept of `frameworks`, which abstracts configuration for `renderers` (e.g. React, Vue), `builders` (e.g. Webpack, Vite) and defaults to make integrations easier. This requires quite a few changes, depending on what your project is using. **We recommend you to use the automigrations**, but in case the command fails or you'd like to do the changes manually, here's a guide:
 
 > Note:
-> All of the following changes can be done automatically either via `npx storybook@next upgrade --prerelease` or via the `npx storybook@next automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do.
+> All of the following changes can be done automatically either via `npx storybook@latest upgrade --prerelease` or via the `npx storybook@latest automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do.
 
 
 ##### Available framework packages
@@ -1032,7 +1032,7 @@ Storybook now uses [Babel mode v7](#babel-mode-v7) exclusively. In 6.x, Storyboo
 In the new mode, Storybook expects you to provide a configuration file. Depending on the complexity your project, Storybook will fail to run without a babel configuration. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory:
 
 ```sh
-npx storybook@next babelrc
+npx storybook@latest babelrc
 ```
 
 This command will create a `.babelrc.json` file in your project, containing a few babel plugins which will be installed as dev dependencies.
@@ -1510,7 +1510,7 @@ If you get stuck with the [MDX2 upgrade](#mdx2-upgrade), we also provide opt-in
 To process your `.stories.mdx` files with MDX1, first install the `@storybook/mdx1-csf` package in your project:
 
 ```
-yarn add -D @storybook/mdx1-csf@next
+yarn add -D @storybook/mdx1-csf@latest
 ```
 
 Then enable the `legacyMdx1` feature flag in your `.storybook/main.js` file:
@@ -1618,10 +1618,6 @@ If your story depends on a play function to render correctly, _and_ you are conf
 
 This was a legacy global variable from the early days of react docgen. If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`.
 
-#### parameters.docs.source.excludeDecorators defaults to true
-
-By default we don't render decorators in the Source/Canvas blocks. If you want to render decorators, you can set the parameter to `false`.
-
 ### 7.0 Deprecations and default changes
 
 #### storyStoreV7 enabled by default
@@ -1946,7 +1942,7 @@ You can run the existing suite of automigrations to see which ones apply to your
 
 ```
 
-npx sb@next automigrate
+npx sb@latest automigrate
 
 ```
 
@@ -1958,7 +1954,7 @@ Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, i
 
 ```
 
-npx sb@next automigrate
+npx sb@latest automigrate
 
 ```
 
@@ -2212,7 +2208,7 @@ module.exports = {
 In the new mode, Storybook expects you to provide a configuration file. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory:
 
 ```sh
-npx sb@next babelrc
+npx sb@latest babelrc
 ```
 
 This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly.
@@ -2796,7 +2792,7 @@ Basic.decorators = [ ... ];
 To help you upgrade your stories, we've created a codemod:
 
 ```
-npx @storybook/cli@next migrate csf-hoist-story-annotations --glob="**/*.stories.js"
+npx @storybook/cli@latest migrate csf-hoist-story-annotations --glob="**/*.stories.js"
 ```
 
 For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations).
@@ -3090,7 +3086,7 @@ We've removed the ability to specify the hierarchy separators (how you control t
 If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.**
 
 ```
-npx sb@next migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
+npx sb@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
 ```
 
 We also now default to showing "roots", which are non-expandable groupings in the sidebar for the top-level groups. If you'd like to disable this, set the `showRoots` option in `.storybook/manager.js`:
@@ -4210,7 +4206,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you
 - If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
 
   ```
-  npm i -D @babel/core babel-loader@next
+  npm i -D @babel/core babel-loader@latest
   ```
 
 - If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7` and that you have a `.babelrc` in your project directory.

code/addons/actions/package.json

@@ -61,6 +61,9 @@
       "manager": [
         "dist/manager.d.ts"
       ],
+      "decorator": [
+        "dist/decorator.d.ts"
+      ],
       "preview": [
         "dist/preview.d.ts"
       ]

code/addons/docs/src/preview.ts

@@ -4,8 +4,5 @@ export const parameters: any = {
       const { DocsRenderer } = (await import('./DocsRenderer')) as any;
       return new DocsRenderer();
     },
-    source: {
-      excludeDecorators: true,
-    },
   },
 };

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -1,4 +1,4 @@
-import { ApplicationRef, enableProdMode, importProvidersFrom, NgModule } from '@angular/core';
+import { ApplicationRef, enableProdMode, NgModule } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -14,16 +14,16 @@ type StoryRenderInfo = {
   moduleMetadataSnapshot: string;
 };
 
-const applicationRefs = new Set<ApplicationRef>();
+const applicationRefs = new Map<HTMLElement, ApplicationRef>();
 
 export abstract class AbstractRenderer {
   /**
    * Wait and destroy the platform
    */
-  public static resetApplications() {
+  public static resetApplications(domNode?: HTMLElement) {
     componentNgModules.clear();
-    applicationRefs.forEach((appRef) => {
-      if (!appRef.destroyed) {
+    applicationRefs.forEach((appRef, appDOMNode) => {
+      if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
         appRef.destroy();
       }
     });
@@ -50,7 +50,7 @@ export abstract class AbstractRenderer {
     }
   };
 
-  protected previousStoryRenderInfo: StoryRenderInfo;
+  protected previousStoryRenderInfo = new Map<HTMLElement, StoryRenderInfo>();
 
   // Observable to change the properties dynamically without reloading angular module&component
   protected storyProps$: Subject<ICollection | undefined>;
@@ -67,7 +67,7 @@ export abstract class AbstractRenderer {
     }
   }
 
-  protected abstract beforeFullRender(): Promise<void>;
+  protected abstract beforeFullRender(domNode?: HTMLElement): Promise<void>;
 
   protected abstract afterFullRender(): Promise<void>;
 
@@ -100,6 +100,7 @@ export abstract class AbstractRenderer {
 
     if (
       !this.fullRendererRequired({
+        targetDOMNode,
         storyFnAngular,
         moduleMetadata: {
           ...storyFnAngular.moduleMetadata,
@@ -112,7 +113,7 @@ export abstract class AbstractRenderer {
       return;
     }
 
-    await this.beforeFullRender();
+    await this.beforeFullRender(targetDOMNode);
 
     // Complete last BehaviorSubject and set a new one for the current module
     if (this.storyProps$) {
@@ -140,7 +141,7 @@ export abstract class AbstractRenderer {
       ],
     });
 
-    applicationRefs.add(applicationRef);
+    applicationRefs.set(targetDOMNode, applicationRef);
 
     await this.afterFullRender();
   }
@@ -171,22 +172,24 @@ export abstract class AbstractRenderer {
   }
 
   private fullRendererRequired({
+    targetDOMNode,
     storyFnAngular,
     moduleMetadata,
     forced,
   }: {
+    targetDOMNode: HTMLElement;
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadata: NgModule;
     forced: boolean;
   }) {
-    const { previousStoryRenderInfo } = this;
+    const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
 
     const currentStoryRender = {
       storyFnAngular,
       moduleMetadataSnapshot: stringify(moduleMetadata),
     };
 
-    this.previousStoryRenderInfo = currentStoryRender;
+    this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender);
 
     if (
       // check `forceRender` of story RenderContext

code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts

@@ -38,8 +38,8 @@ export class DocsRenderer extends AbstractRenderer {
     await super.render({ ...options, forced: false });
   }
 
-  async beforeFullRender(): Promise<void> {
-    DocsRenderer.resetApplications();
+  async beforeFullRender(domNode?: HTMLElement): Promise<void> {
+    DocsRenderer.resetApplications(domNode);
   }
 
   async afterFullRender(): Promise<void> {

code/lib/cli/src/js-package-manager/NPMProxy.ts

@@ -1,4 +1,5 @@
 import sort from 'semver/functions/sort';
+import { platform } from 'os';
 import { JsPackageManager } from './JsPackageManager';
 import type { PackageJson } from './PackageJson';
 import type { InstallationMetadata, PackageMetadata } from './types';
@@ -51,7 +52,8 @@ export class NPMProxy extends JsPackageManager {
   }
 
   public findInstallations() {
-    const commandResult = this.executeCommand('npm', ['ls', '--json', '--depth=99']);
+    const pipeToNull = platform() === 'win32' ? '2>NUL' : '2>/dev/null';
+    const commandResult = this.executeCommand('npm', ['ls', '--json', '--depth=99', pipeToNull]);
 
     try {
       const parsedOutput = JSON.parse(commandResult);

code/lib/preview-api/src/modules/addons/hooks.ts

@@ -134,7 +134,7 @@ function hookify<TRenderer extends Renderer>(
   decorator: DecoratorFunction<TRenderer>
 ): DecoratorFunction<TRenderer>;
 function hookify<TRenderer extends Renderer>(fn: AbstractFunction) {
-  return (...args: any[]) => {
+  const hookified = (...args: any[]) => {
     const { hooks }: { hooks: HooksContext<TRenderer> } =
       typeof args[0] === 'function' ? args[1] : args[0];
 
@@ -172,6 +172,9 @@ function hookify<TRenderer extends Renderer>(fn: AbstractFunction) {
     hooks.currentDecoratorName = prevDecoratorName;
     return result;
   };
+
+  hookified.originalFn = fn;
+  return hookified;
 }
 
 // Counter to prevent infinite loops.

code/lib/theming/package.json

@@ -54,7 +54,7 @@
     "memoizerific": "^1.11.3"
   },
   "devDependencies": {
-    "@emotion/cache": "^11.10.3",
+    "@emotion/cache": "^11.10.7",
     "@emotion/is-prop-valid": "^1.2.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

code/renderers/react/src/applyDecorators.ts

@@ -0,0 +1,19 @@
+import { defaultDecorateStory } from '@storybook/preview-api';
+import type { LegacyStoryFn, DecoratorFunction } from '@storybook/types';
+
+import type { ReactRenderer } from './types';
+import { jsxDecorator } from './docs/jsxDecorator';
+
+export const applyDecorators = (
+  storyFn: LegacyStoryFn<ReactRenderer>,
+  decorators: DecoratorFunction<ReactRenderer>[]
+): LegacyStoryFn<ReactRenderer> => {
+  // @ts-expect-error originalFn is not defined on the type for decorator. This is a temporary fix
+  // that we will remove soon (likely) in favour of a proper concept of "inner" decorators.
+  const jsxIndex = decorators.findIndex((d) => d.originalFn === jsxDecorator);
+
+  const reorderedDecorators =
+    jsxIndex === -1 ? decorators : [...decorators.splice(jsxIndex, 1), ...decorators];
+
+  return defaultDecorateStory(storyFn, reorderedDecorators);
+};

code/renderers/react/src/config.ts

@@ -5,3 +5,5 @@ export const parameters = { renderer: 'react', ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
 
 export { render, renderToCanvas } from './render';
+
+export { applyDecorators } from './applyDecorators';

code/renderers/react/template/stories/decorators.stories.tsx

@@ -1,11 +1,12 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useContext, createContext } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const Component: FC = () => <p>Story</p>;
 
 export default {
   component: Component,
+  tags: ['autodocs'],
   decorators: [
     (Story) => (
       <>
@@ -26,3 +27,22 @@ export const All: StoryObj<typeof Component> = {
     ),
   ],
 };
+
+// This story will error if `parameters.docs.source.excludeDecorators` is true:
+// See https://github.com/storybookjs/storybook/issues/21900
+const TestContext = createContext<boolean>(false);
+export const Context: StoryObj<typeof Component> = {
+  // parameters: { docs: { source: { excludeDecorators: true } } },
+  decorators: [
+    (Story) => (
+      <TestContext.Provider value>
+        <Story />
+      </TestContext.Provider>
+    ),
+  ],
+  render: function Render(args, context) {
+    const value = useContext(TestContext);
+    if (!value) throw new Error('TestContext not set, decorator did not run!');
+    return <p>Story</p>;
+  },
+};

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

@@ -1,6 +1,6 @@
 import type { ComponentProps, FunctionComponent } from 'react';
 import React from 'react';
-import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
+import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming';
 import { SyntaxHighlighter } from '@storybook/components';
 
 import { EmptyBlock } from './EmptyBlock';
@@ -69,7 +69,7 @@ const SourceSkeletonPlaceholder = styled.div(({ theme }) => ({
   marginTop: 1,
   width: '60%',
 
-  [`&:first-child`]: {
+  [`&:first-child${ignoreSsrWarning}`]: {
     margin: 0,
   },
 }));

code/ui/components/src/spaced/Spaced.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { styled } from '@storybook/theming';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
 
 const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
 
@@ -20,15 +20,15 @@ const Container = styled.div<ContainerProps>(
             marginLeft: col * theme.layoutMargin,
             verticalAlign: 'inherit',
           },
-          [`& > *:first-child`]: {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginLeft: 0,
           },
         }
       : {
           '& > *': {
             marginTop: row * theme.layoutMargin,
           },
-          [`& > *:first-child`]: {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginTop: 0,
           },
         },