From 85857e0b1093d7987d13218171d71fb49f5177c5 Mon Sep 17 00:00:00 2001 From: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com> Date: Tue, 30 Jan 2024 23:01:46 +0100 Subject: [PATCH 1/5] add "React peer dependency is no longer required" section to addon migration guide --- docs/addons/addon-migration-guide.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/addons/addon-migration-guide.md b/docs/addons/addon-migration-guide.md index 8d0087b4fb4a..4e10e1cee527 100644 --- a/docs/addons/addon-migration-guide.md +++ b/docs/addons/addon-migration-guide.md @@ -34,6 +34,15 @@ Please upgrade your addon to Node.js 18, as support for Node.js 16 has ended. UI injected into panels, tools, etc. by addons is now rendered with React 18. Also note that the `key` prop is no longer passed to the render function. +### React peer dependency is no longer required + +To remove your addon's peer dependency on React, and reduce its install size, do the following: + +1. Move `react`, `react-dom` and the globalized Storybook packages from `peerDependencies` to `devDependencies` +2. Add the list of globalized packages to the `externals` property in the `tsup` configuration, to ensure they are not part of the bundle. + +For an example, see [the updates we've made to the addon-kit](https://github.com/storybookjs/addon-kit/pull/60/files#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a20). These changes are optional but recommended. + ### @storybook/components deprecations `Icons` component from `@storybook/components` is now deprecated in favor of [`@storybook/icons`](https://github.com/storybookjs/icons). Additionally, various `Button` component props are also deprecated, with alternatives provided. From f6fc02da789cff9bebae058fb7658d1e06b9a3b2 Mon Sep 17 00:00:00 2001 From: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com> Date: Tue, 13 Feb 2024 21:09:28 +0100 Subject: [PATCH 2/5] add note for pre-tsup authors --- docs/addons/addon-migration-guide.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/addons/addon-migration-guide.md b/docs/addons/addon-migration-guide.md index 4e10e1cee527..6be2b067341d 100644 --- a/docs/addons/addon-migration-guide.md +++ b/docs/addons/addon-migration-guide.md @@ -43,6 +43,8 @@ To remove your addon's peer dependency on React, and reduce its install size, do For an example, see [the updates we've made to the addon-kit](https://github.com/storybookjs/addon-kit/pull/60/files#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a20). These changes are optional but recommended. +Note: This assumes your addon is using tsup for bundling. If your addon was built with an older version of addon-kit that uses Babel for bundling, you have to first switch to tsup. For guidance, explore these [older changes implemented in the addon-kit](https://github.com/storybookjs/addon-kit/pull/45/files). + ### @storybook/components deprecations `Icons` component from `@storybook/components` is now deprecated in favor of [`@storybook/icons`](https://github.com/storybookjs/icons). Additionally, various `Button` component props are also deprecated, with alternatives provided. From efe45edb7ae6aa92d809b2ada6401a43c0db4353 Mon Sep 17 00:00:00 2001 From: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com> Date: Fri, 16 Feb 2024 13:58:39 +0100 Subject: [PATCH 3/5] Update docs/addons/addon-migration-guide.md --- docs/addons/addon-migration-guide.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/addons/addon-migration-guide.md b/docs/addons/addon-migration-guide.md index 6be2b067341d..a047198b1add 100644 --- a/docs/addons/addon-migration-guide.md +++ b/docs/addons/addon-migration-guide.md @@ -43,7 +43,11 @@ To remove your addon's peer dependency on React, and reduce its install size, do For an example, see [the updates we've made to the addon-kit](https://github.com/storybookjs/addon-kit/pull/60/files#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a20). These changes are optional but recommended. -Note: This assumes your addon is using tsup for bundling. If your addon was built with an older version of addon-kit that uses Babel for bundling, you have to first switch to tsup. For guidance, explore these [older changes implemented in the addon-kit](https://github.com/storybookjs/addon-kit/pull/45/files). + + +This assumes your addon is using tsup for bundling. If your addon was built with an older version of addon-kit that uses Babel for bundling, you have to first switch to tsup. For guidance, explore these [older changes implemented in the addon-kit](https://github.com/storybookjs/addon-kit/pull/45/files). + + ### @storybook/components deprecations From eb0835de0ab0f609359901d99a80dead41b53dfb Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 16 Feb 2024 14:20:08 +0100 Subject: [PATCH 4/5] add note about addon-kit as a migration example --- docs/addons/addon-migration-guide.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/addons/addon-migration-guide.md b/docs/addons/addon-migration-guide.md index 6be2b067341d..f252052f3f58 100644 --- a/docs/addons/addon-migration-guide.md +++ b/docs/addons/addon-migration-guide.md @@ -69,6 +69,16 @@ As a workaround, update your documentation to tell users to opt-in to Babel supp npx storybook@latest add @storybook/addon-webpack5-compiler-babel ``` +## Migration Example + +[The Addon Kit repository](https://github.com/storybookjs/addon-kit) has been migrated to support Storybook 8.0, and you can use that as a real-world example to guide your migration. The migration incorporates most of the changes listed above, including migrating the package to ESM with `type: module`. Migrating to ESM is not necessary but we recommend it as it simplifes some of the setup. If you follow the ESM migration below and update your export map in `package.json`, you can safely remove any `manager.js`, `preview.js` and `preset.js` files from the root directory. + +[This complete diff view](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f) shows everything changed between 7.0 and 8.0, but not all of it is relevant for your migration. You can specifically focus on: + +- [`package.json`](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519): Updating dependencies, moving to ESM, updating entries +- [tsup.config.ts](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a20): Updating bundling strategy to take advantage of Storybook globals. +- [`.storybook/local-preset.js`](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-390b53ea479b1ceffcbf31944f644ee23aa9f337b75a8a0ffd815bed50d376cb): Supporting the ESM migration. + ## Releasing Release a new major version of your addon for Storybook 8.0. We recommend you to continue supporting 7.x with minor or patch versions. We also recommend releasing your own addon using the `next` tag to test it out in projects. From 40f416065a983d5ad41b2ef124e60a1b83c71266 Mon Sep 17 00:00:00 2001 From: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com> Date: Tue, 20 Feb 2024 17:56:05 +0100 Subject: [PATCH 5/5] Update docs/addons/addon-migration-guide.md Co-authored-by: jonniebigodes --- docs/addons/addon-migration-guide.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/addons/addon-migration-guide.md b/docs/addons/addon-migration-guide.md index 191418d48ed6..269c615fe42d 100644 --- a/docs/addons/addon-migration-guide.md +++ b/docs/addons/addon-migration-guide.md @@ -75,13 +75,17 @@ npx storybook@latest add @storybook/addon-webpack5-compiler-babel ## Migration Example -[The Addon Kit repository](https://github.com/storybookjs/addon-kit) has been migrated to support Storybook 8.0, and you can use that as a real-world example to guide your migration. The migration incorporates most of the changes listed above, including migrating the package to ESM with `type: module`. Migrating to ESM is not necessary but we recommend it as it simplifes some of the setup. If you follow the ESM migration below and update your export map in `package.json`, you can safely remove any `manager.js`, `preview.js` and `preset.js` files from the root directory. +The Addon Kit [repository](https://github.com/storybookjs/addon-kit) has already been updated to support Storybook 8.0, and you can use it as a reference for your migration. You'll see the changes mentioned in this guide, including ESM support via the `type: module` configuration. As an addon maintainer, we encourage you to update your addon to include them. It simplifies the setup and makes it easier for users to use your addon with the latest version of Storybook. If you choose to follow along with the ESM migration, we've prepared an abbreviated list of changes below. -[This complete diff view](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f) shows everything changed between 7.0 and 8.0, but not all of it is relevant for your migration. You can specifically focus on: +- [`package.json`](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519) for dependency management, ESM support and updates to the addon's entry points. +- [`tsup.config.ts`](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a2) for bundling changes, factoring in Storybook's globals. +- [`.storybook/local-preset.js`](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-390b53ea479b1ceffcbf31944f644ee23aa9f337b75a8a0ffd815bed50d376cb) to support the ESM migration. -- [`package.json`](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519): Updating dependencies, moving to ESM, updating entries -- [tsup.config.ts](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a20): Updating bundling strategy to take advantage of Storybook globals. -- [`.storybook/local-preset.js`](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f#diff-390b53ea479b1ceffcbf31944f644ee23aa9f337b75a8a0ffd815bed50d376cb): Supporting the ESM migration. + + +If you migrate your addon to support ESM, you can safely remove any `manager.js`, `preview.js`, and `preset.js` files from the addon's root directory. For a complete overview of the changes applied to the Addon Kit to fully support Storybook 8.0, see the following [diff view](https://github.com/storybookjs/addon-kit/compare/79282986..cf0875f). + + ## Releasing