Deprecate addParameters and addDecorator

MIGRATION.md

@@ -38,6 +38,7 @@
     - [Removed addon-centered](#removed-addon-centered)
     - [Deprecated polymer](#deprecated-polymer)
     - [Deprecated immutable options parameters](#deprecated-immutable-options-parameters)
+    - [Deprecated addParameters and addDecorator](#deprecated-addparameters-and-adddecorator)
 - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
   - [To main.js configuration](#to-mainjs-configuration)
     - [Using main.js](#using-mainjs)
@@ -466,6 +467,8 @@ export StoryOne = ...;
 StoryOne.story = { parameters: { ...commonParameters, other: 'things' } };
 ```
 
+> NOTE: also the use of `addParameters` and `addDecorator` at arbitrary points is also deprecated, see [the deprecation warning](#deprecated-addparameters-and-adddecorator).
+
 #### Changed Parameter Handling
 
 There have been a few rationalizations of parameter handling in 6.0 to make things more predictable and fit better with the intention of parameters:
@@ -641,6 +644,12 @@ addons.setConfig({
 });
 ```
 
+#### Deprecated addParameters and addDecorator
+
+The `addParameters` and `addDecorator` APIs to add global decorators and parameters, exported by the various frameworks (e.g. `@storybook/react`) and `@storybook/client` are now deprecated.
+
+Instead, use `export const parameters = {};` and `export const decorators = [];` in your `.storybook/preview.js`. Addon authors similarly should use such an export in a `previewEntry` file.
+
 ## From version 5.2.x to 5.3.x
 
 ### To main.js configuration

examples/official-storybook/preview.js

@@ -1,7 +1,6 @@
 import { document } from 'global';
 import React, { Fragment, useEffect } from 'react';
-import { isChromatic } from 'chromatic';
-import { addDecorator, addParameters } from '@storybook/react';
+import isChromatic from 'chromatic/isChromatic';
 import {
   Global,
   ThemeProvider,
@@ -33,8 +32,6 @@ if (process.env.NODE_ENV === 'development') {
 addHeadWarning('preview-head-not-loaded', 'Preview head not loaded');
 addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded');
 
-addDecorator(withCssResources);
-
 const ThemeBlock = styled.div(
   {
     position: 'absolute',
@@ -88,59 +85,63 @@ const ThemedSetRoot = () => {
   return null;
 };
 
-addDecorator((StoryFn, { globals: { theme = 'light' } }) => {
-  switch (theme) {
-    case 'side-by-side': {
-      return (
-        <Fragment>
-          <ThemeProvider theme={convert(themes.light)}>
-            <Global styles={createReset} />
-          </ThemeProvider>
-          <ThemeProvider theme={convert(themes.light)}>
-            <ThemeBlock side="left">
-              <StoryFn />
-            </ThemeBlock>
-          </ThemeProvider>
-          <ThemeProvider theme={convert(themes.dark)}>
-            <ThemeBlock side="right">
-              <StoryFn />
-            </ThemeBlock>
-          </ThemeProvider>
-        </Fragment>
-      );
-    }
-    case 'stacked': {
-      return (
-        <Fragment>
-          <ThemeProvider theme={convert(themes.light)}>
+export const decorators = [
+  withCssResources,
+  (StoryFn, { globals: { theme = 'light' } }) => {
+    switch (theme) {
+      case 'side-by-side': {
+        return (
+          <Fragment>
+            <ThemeProvider theme={convert(themes.light)}>
+              <Global styles={createReset} />
+            </ThemeProvider>
+            <ThemeProvider theme={convert(themes.light)}>
+              <ThemeBlock side="left">
+                <StoryFn />
+              </ThemeBlock>
+            </ThemeProvider>
+            <ThemeProvider theme={convert(themes.dark)}>
+              <ThemeBlock side="right">
+                <StoryFn />
+              </ThemeBlock>
+            </ThemeProvider>
+          </Fragment>
+        );
+      }
+      case 'stacked': {
+        return (
+          <Fragment>
+            <ThemeProvider theme={convert(themes.light)}>
+              <Global styles={createReset} />
+            </ThemeProvider>
+            <ThemeProvider theme={convert(themes.light)}>
+              <ThemeStack side="left">
+                <StoryFn />
+              </ThemeStack>
+            </ThemeProvider>
+            <ThemeProvider theme={convert(themes.dark)}>
+              <ThemeStack side="right">
+                <StoryFn />
+              </ThemeStack>
+            </ThemeProvider>
+          </Fragment>
+        );
+      }
+      default: {
+        return (
+          <ThemeProvider theme={convert(themes[theme])}>
             <Global styles={createReset} />
+            <ThemedSetRoot />
+            <StoryFn />
           </ThemeProvider>
-          <ThemeProvider theme={convert(themes.light)}>
-            <ThemeStack side="left">
-              <StoryFn />
-            </ThemeStack>
-          </ThemeProvider>
-          <ThemeProvider theme={convert(themes.dark)}>
-            <ThemeStack side="right">
-              <StoryFn />
-            </ThemeStack>
-          </ThemeProvider>
-        </Fragment>
-      );
+        );
+      }
     }
-    default: {
-      return (
-        <ThemeProvider theme={convert(themes[theme])}>
-          <Global styles={createReset} />
-          <ThemedSetRoot />
-          <StoryFn />
-        </ThemeProvider>
-      );
-    }
-  }
-});
+  },
+];
 
-addParameters({
+export const parameters = {
+  exportedParameter: 'exportedParameter',
   a11y: {
     config: {},
     options: {
@@ -156,10 +157,6 @@ addParameters({
     theme: themes.light,
     page: () => <DocsPage subtitleSlot={({ kind }) => `Subtitle: ${kind}`} />,
   },
-});
-
-export const parameters = {
-  exportedParameter: 'exportedParameter',
 };
 
 export const globals = {

lib/client-api/src/client_api.ts

@@ -20,16 +20,33 @@ import { defaultDecorateStory } from './decorators';
 // relevant framework instanciates them via `start.js`. The good news is this happens right away.
 let singleton: ClientApi;
 
-export const addDecorator = (decorator: DecoratorFunction) => {
+const addDecoratorDeprecationWarning = deprecate(
+  () => {},
+  `\`addDecorator\` is deprecated, and will be removed in Storybook 7.0.
+Instead, use \`export const decorators = [];\` in your \`preview.js\`.
+Read more at https://github.com/storybookjs/storybook/MIGRATION.md#deprecated-addparameters-and-adddecorator).`
+);
+export const addDecorator = (decorator: DecoratorFunction, deprecationWarning = true) => {
   if (!singleton)
     throw new Error(`Singleton client API not yet initialized, cannot call addDecorator`);
 
+  if (deprecationWarning) addDecoratorDeprecationWarning();
+
   singleton.addDecorator(decorator);
 };
-export const addParameters = (parameters: Parameters) => {
+
+const addParametersDeprecationWarning = deprecate(
+  () => {},
+  `\`addParameters\` is deprecated, and will be removed in Storybook 7.0.
+Instead, use \`export const parameters = {};\` in your \`preview.js\`.
+Read more at https://github.com/storybookjs/storybook/MIGRATION.md#deprecated-addparameters-and-adddecorator).`
+);
+export const addParameters = (parameters: Parameters, deprecationWarning = true) => {
   if (!singleton)
     throw new Error(`Singleton client API not yet initialized, cannot call addParameters`);
 
+  if (deprecationWarning) addParametersDeprecationWarning();
+
   singleton.addParameters(parameters);
 };
 

lib/core/src/server/preview/virtualModuleEntry.template.js

@@ -15,10 +15,10 @@ if (args || argTypes) {
   logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify({ args, argTypes }));
 }
 if (decorators) {
-  decorators.forEach((decorator) => addDecorator(decorator));
+  decorators.forEach((decorator) => addDecorator(decorator, false));
 }
 if (parameters || globals || globalTypes) {
-  addParameters({ ...parameters, globals, globalTypes });
+  addParameters({ ...parameters, globals, globalTypes }, false);
 }
 if (argTypesEnhancers) {
   argTypesEnhancers.forEach((enhancer) => addArgTypesEnhancer(enhancer));