From a7a5ae3fe124c5771b313475a2556acdc1bb0f4b Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 4 Mar 2019 11:47:12 +1100 Subject: [PATCH 1/5] REMOVE previously deprecated default export from backgrounds --- addons/backgrounds/src/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/addons/backgrounds/src/index.ts b/addons/backgrounds/src/index.ts index de5cb59a21fd..0ecd254bda62 100644 --- a/addons/backgrounds/src/index.ts +++ b/addons/backgrounds/src/index.ts @@ -35,11 +35,6 @@ export const withBackgrounds = makeDecorator({ }, }); -export default deprecate( - withBackgrounds, - 'The default export of @storybook/addon-backgrounds is deprecated, please `import { withBackgrounds }` instead' -); - if (module && module.hot && module.hot.decline) { module.hot.decline(); } From 0d4c21c802c0bcaca8cc25e2deaba391d01ed3bb Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 4 Mar 2019 12:00:14 +1100 Subject: [PATCH 2/5] FIX: a bit of cleanup for backgrounds. Didn't change any supported behaviour, but this should help with users migrating. #5818 --- MIGRATION.md | 19 ++++++++++++ addons/backgrounds/src/constants.ts | 5 ---- addons/backgrounds/src/index.ts | 46 ++++++++--------------------- 3 files changed, 32 insertions(+), 38 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index a1d107791255..5788129f9d91 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -163,6 +163,25 @@ storiesOf('Stories', module) .add('centered', () => 'Hello', { decorators: [centered] }); ``` +## Addon backgrounds uses parameters + +Similarly, `@storybook/addon-backgrounds` uses parameters to pass background options. If you previously had: + +```js +import { withBackgrounds } from `@storybook/addon-backgrounds`; + +storiesOf('Stories', module) + .addDecorator(withBackgrounds(options)); +``` + +You can replace it with: + +```js +storiesOf('Stories', module).addParameters({ backgrounds: options }); +``` + +You can pass `backgrounds` parameters at the global level (via `addParameters` imported from `@storybook/react` et al.), and the story level (via the third argument to `.add()`). + ## From version 4.0.x to 4.1.x There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage. diff --git a/addons/backgrounds/src/constants.ts b/addons/backgrounds/src/constants.ts index df63c53889d1..503f310a6f5b 100644 --- a/addons/backgrounds/src/constants.ts +++ b/addons/backgrounds/src/constants.ts @@ -1,7 +1,2 @@ export const ADDON_ID = 'storybook/background'; export const PARAM_KEY = 'backgrounds'; - -export const EVENTS = { - SET: `${ADDON_ID}:set`, - UNSET: `${ADDON_ID}:unset`, -}; diff --git a/addons/backgrounds/src/index.ts b/addons/backgrounds/src/index.ts index 0ecd254bda62..51e8ff3a9db6 100644 --- a/addons/backgrounds/src/index.ts +++ b/addons/backgrounds/src/index.ts @@ -1,39 +1,19 @@ -import { addons, makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons'; +import { makeDecorator, StoryContext, StoryGetter } from '@storybook/addons'; import deprecate from 'util-deprecate'; -import { REGISTER_SUBSCRIPTION } from '@storybook/core-events'; -import { EVENTS } from './constants'; -import { BackgroundConfig } from './models'; - -let prevBackgrounds: BackgroundConfig[]; - -const subscription = () => () => { - prevBackgrounds = null; - addons.getChannel().emit(EVENTS.UNSET); -}; - -export const withBackgrounds = makeDecorator({ - name: 'withBackgrounds', - parameterName: 'backgrounds', - skipIfNoParametersOrOptions: true, - allowDeprecatedUsage: true, - wrapper: (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => { - const data = parameters || options || []; - const backgrounds = Array.isArray(data) ? data : Object.values(data); - - if (backgrounds.length === 0) { +// This decorator is kept purely so we produce a decorator that is compatible with both +// `addDecorator(withBackgrounds(...))` and `addDecorator(withBackgrounds)` +export const withBackgrounds = deprecate( + makeDecorator({ + name: 'withBackgrounds', + parameterName: 'backgrounds', + wrapper: (getStory: StoryGetter, context: StoryContext) => { return getStory(context); - } - - if (prevBackgrounds !== backgrounds) { - addons.getChannel().emit(EVENTS.SET, backgrounds); - prevBackgrounds = backgrounds; - } - addons.getChannel().emit(REGISTER_SUBSCRIPTION, subscription); - - return getStory(context); - }, -}); + }, + }), + `Note that withBackgrounds(options) has been replaced by addParameters({ backgrounds: options}) +Read more about it in the migration guide: https://github.com/storybooks/storybook/blob/master/MIGRATION.md` +); if (module && module.hot && module.hot.decline) { module.hot.decline(); From 81b9656c0ec9dcee876b0d55bdafee3f0cbdae0d Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 4 Mar 2019 13:19:20 +1100 Subject: [PATCH 3/5] REMOVE old deprecated background exports --- addons/backgrounds/mithril.js | 1 - addons/backgrounds/src/deprecated.ts | 8 -------- addons/backgrounds/vue.js | 1 - 3 files changed, 10 deletions(-) delete mode 100644 addons/backgrounds/mithril.js delete mode 100644 addons/backgrounds/src/deprecated.ts delete mode 100644 addons/backgrounds/vue.js diff --git a/addons/backgrounds/mithril.js b/addons/backgrounds/mithril.js deleted file mode 100644 index c22c26b6732d..000000000000 --- a/addons/backgrounds/mithril.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/deprecated'); diff --git a/addons/backgrounds/src/deprecated.ts b/addons/backgrounds/src/deprecated.ts deleted file mode 100644 index f03a1a290186..000000000000 --- a/addons/backgrounds/src/deprecated.ts +++ /dev/null @@ -1,8 +0,0 @@ -import deprecate from 'util-deprecate'; - -import backgrounds from '.'; - -export default deprecate( - backgrounds, - "addon-backgrounds: framework-specific imports are deprecated, just use `import backgrounds from '@storybook/addon-backgrounds`" -); diff --git a/addons/backgrounds/vue.js b/addons/backgrounds/vue.js deleted file mode 100644 index c22c26b6732d..000000000000 --- a/addons/backgrounds/vue.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/deprecated'); From f0ec1fb9f68a64a80689b5ae68ba1b3780503b8d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 4 Mar 2019 10:49:45 +0800 Subject: [PATCH 4/5] Add migration TOC --- MIGRATION.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 04ee29938fcd..5d65e7065775 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -5,6 +5,8 @@ - [Story hierarchy defaults](#story-hierarchy-defaults) - [Options addon deprecated](#options-addon-deprecated) - [Individual story decorators](#individual-story-decorators) + - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters) + - [Addon viewport uses parameters](#addon-backgrounds-uses-parameters) - [From version 4.0.x to 4.1.x](#from-version-40x-to-41x) - [Private addon config](#private-addon-config) - [React 15.x](#react-15x) From 7051627dd9fa34a8d154a7afb3009b7f64213d2c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 4 Mar 2019 10:51:12 +0800 Subject: [PATCH 5/5] Fix formatting --- MIGRATION.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 5d65e7065775..195e60581945 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -237,16 +237,16 @@ Also, here's the error you'll get if you're running an older version of React: ``` core.browser.esm.js:15 Uncaught TypeError: Object(...) is not a function -at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) -at **webpack_require** (bootstrap:724) -at fn (bootstrap:101) -at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) -at **webpack_require** (bootstrap:724) -at fn (bootstrap:101) -at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) -at **webpack_require** (bootstrap:724) -at fn (bootstrap:101) -at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12) + at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) + at __webpack_require__ (bootstrap:724) + at fn (bootstrap:101) + at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) + at __webpack_require__ (bootstrap:724) + at fn (bootstrap:101) + at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) + at __webpack_require__ (bootstrap:724) + at fn (bootstrap:101) + at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12) ```