Addons, core: Make `react` and Storybook packages `devDependencies` where possible #24676

JReinhold · 2023-11-02T09:21:23Z

Works on #24490

TODO

~~Document new optimizeDeps preset property~~
Reword "no React" error
Test that an addon author can import from manager-api and still have correct types, even though @storybook/types and @types/react are not part of the package.

What I did

This PR is a retry of #23486 with many non-essential things ignored.

The main purpose of this PR is to minimize the amount of peer dependencies in addons and a few of the core packages, most notably removing react as a peer dependency.

The way the manager and the preview globalizes a fixed set of dependencies means that these packages don't strictly need the dependencies, as they will be referenced from the global window instead, which our builders ensures. Removing them from peer dependencies mean that users don't need to specify them either.

Having them as devDependencies will however make our (tsup) bundler default to bundle them in, which we don't want. Therefore this PR also introduces a new bundler configuration, addon-bundle that makes sure that the globalized packages are externalized (thus the imports are kept intact), so they can be replaced with the global reference when built.
A handful of packages like manager-api are not using addon-bundle but still need these packages externalized, so they've been added to their bundler configuration manually to ensure that happens.

addon-essentials and addon-docs are largely left out of this PR, as tackling them in terms of react requires more work.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

It's important to test this in the different package manager configuration, npm, yarn, yarn pnp and pnpm and with both builders.

For each configuration and builder:

Create a new non-React sandbox outside of the monorepo (npx sb@next sandbox)
Replace all versions with this PR's canary version.

Testing `addon-essentials` with docs

Run storybook and build-storybook and see that it works

Testing `addon-docs` directly

Replace addon-essentials with addon-docs both in main.ts and package.json
Run storybook and build-storybook and see that it works

Testing `addon-essentials` with docs disabled

Remove the mdx glob from stories in main.ts
Replace addon-docs with addon-essentails both in main.ts and package.json again
Remove react and react-dom from package.json. You will see an unmet peer deps from addon-essentials, that's okay.
disable docs in main.ts with { name: '@storybook/addon-essential', options: { docs: false } }
Run storybook and build-storybook and see that it works, now without React

Testing without `addon-essentials` and `addon-docs`

Remove addon-docs with addon-essentails both from main.ts and package.json again
Run storybook and build-storybook and see that it works

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-24676-sha-214a6f84. Install it by pinning all your Storybook dependencies to that version.

More information


Published version	`0.0.0-pr-24676-sha-214a6f84`
Triggered by	@JReinhold
Repository	storybookjs/storybook
Branch	`experiment-addon-peer-dep`
Commit	`214a6f84`
Datetime	Wed Nov 8 11:20:01 UTC 2023 (`1699442401`)
Workflow run	6797494862

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=24676

…nt-addon-peer-dep

JReinhold · 2023-11-02T13:16:39Z

@shilman could I get you to run benchmarks for this branch/version? It's largely complete now.

We expect unchanged performance and build size, but we expect a noticeable reduction in install size.

JReinhold · 2023-11-02T13:20:59Z

code/addons/controls/package.json

+    "./manager": "./dist/manager.js",
+    "./register": "./dist/manager.js",


manager and preview entries don't need types nor cjs outputs as they are always loaded in the manager or preview in the browser, never directly imported by the user.

JReinhold · 2023-11-02T13:21:33Z

code/addons/controls/package.json

+    "exportEntries": [
+      "./src/index.ts"
    ],
-    "platform": "browser"
+    "managerEntries": [
+      "./src/manager.tsx"
+    ]


these new fields are used by addon-bundle.ts to determine which entry points needs which packages externalized.
exportEntries are assumed to be imported by users, so they won't have any externalization and they'll keep their d.ts files

JReinhold · 2023-11-02T13:23:55Z

code/addons/docs/src/preset.ts

+const optimizeDeps = [
+  '@mdx-js/react',
+  '@storybook/addon-docs > acorn-jsx',
+  '@storybook/addon-docs',
+  '@storybook/addon-essentials/docs/mdx-react-shim',
+  'markdown-to-jsx',
+];


Moved from the Vite builder's default optimization, as that would break if addon-essentials was installed without react, which is a valid scenario now.

code/lib/preview/src/globals/definitions.ts

JReinhold · 2023-11-07T13:49:34Z

@shilman benchmark comparisons between next as a baseline (top) and this branch (bottom):

I don't know how much of this is noise and how much is actual change.

Vite

Webpack

ndelangen · 2023-11-07T14:53:57Z

code/addons/a11y/package.json

    "@testing-library/react": "^11.2.2",
+    "lodash": "^4.17.21",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",


Did you check if the react-dom dep is needed truly in these addons?

It's not a big deal at all having them as devDependencies of course, no harm to users.

no, I added it as a todo to my cooldown period.

Remove react-dom from package.jsons when not needed

Audit dependencies of frameworks+renderers, they might have a lot of unused @storybook dependencies we can remove

shilman

I only reviewed for perf. I found that the sizes were slightly worse across the board, but not by an amount large enough to block the work. It would be useful to explain why the sizes all increased by a small amount, though, since it's not intuitive to me based on the change.

JReinhold added 5 commits October 31, 2023 11:41

move react and @storybook from peer deps to dev deps

1ad0785

globalize packages when bundling

c2b2b1a

use separate bundling technique for addons, manager packages

ab399bd

update eslint rules

51f2cf9

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

c841f89

…nt-addon-peer-dep

JReinhold self-assigned this Nov 2, 2023

JReinhold added 2 commits November 2, 2023 11:45

fix blocks dep

d1b9518

move Vite deps otimization to presets

1388c64

JReinhold commented Nov 2, 2023

View reviewed changes

JReinhold added the ci:normal label Nov 6, 2023

ndelangen reviewed Nov 6, 2023

View reviewed changes

code/lib/preview/src/globals/definitions.ts Outdated Show resolved Hide resolved

JReinhold and others added 3 commits November 7, 2023 12:48

keep SB packages as regular dependencies of manager-api

b5a5307

fix ts-dedent missing from svelte renderer

5f8223c

Merge branch 'next' into experiment-addon-peer-dep

7d703fa

JReinhold marked this pull request as ready for review November 7, 2023 13:49

JReinhold requested review from cdedreuille, tmeasday, kasperpeulen, yannbf, valentinpalkovic, shilman, IanVS and ShaunEvening as code owners November 7, 2023 13:49

ndelangen reviewed Nov 7, 2023

View reviewed changes

add import entry to globals exports

214a6f8

This was referenced Nov 8, 2023

Smarter bundling strategy storybookjs/addon-kit#60

Merged

Docs: Document new addon bundling strategy #24776

Merged

shilman approved these changes Nov 9, 2023

View reviewed changes

ndelangen approved these changes Nov 10, 2023

View reviewed changes

Merge branch 'next' into experiment-addon-peer-dep

94abc13

JReinhold merged commit 657f389 into next Nov 13, 2023
60 checks passed

JReinhold deleted the experiment-addon-peer-dep branch November 13, 2023 10:59

github-actions bot mentioned this pull request Nov 13, 2023

Release: Prerelease 7.6.0-alpha.5 #24710

Merged

30 tasks

kasperpeulen restored the experiment-addon-peer-dep branch November 13, 2023 19:59

kasperpeulen added ci:daily Run the CI jobs that normally run in the daily job. and removed ci:normal labels Nov 13, 2023

kasperpeulen mentioned this pull request Nov 13, 2023

Revert "Addons, core: Make react and Storybook packages devDependencies where possible" #24832

Merged

JReinhold mentioned this pull request Nov 14, 2023

Addons, core: Make react and Storybook packages devDependencies where possible - ATTEMPT 2 #24834

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addons, core: Make `react` and Storybook packages `devDependencies` where possible #24676

Addons, core: Make `react` and Storybook packages `devDependencies` where possible #24676

JReinhold commented Nov 2, 2023 •

edited by storybook-bot

Loading

JReinhold commented Nov 2, 2023

JReinhold Nov 2, 2023

JReinhold Nov 2, 2023 •

edited

Loading

JReinhold Nov 2, 2023

JReinhold commented Nov 7, 2023

ndelangen Nov 7, 2023

JReinhold Nov 7, 2023

shilman left a comment •

edited

Loading

		"./manager": "./dist/manager.js",
		"./register": "./dist/manager.js",

Addons, core: Make react and Storybook packages devDependencies where possible #24676

Addons, core: Make react and Storybook packages devDependencies where possible #24676

Conversation

JReinhold commented Nov 2, 2023 • edited by storybook-bot Loading

TODO

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Testing addon-essentials with docs

Testing addon-docs directly

Testing addon-essentials with docs disabled

Testing without addon-essentials and addon-docs

Documentation

Checklist for Maintainers

🦋 Canary release

JReinhold commented Nov 2, 2023

JReinhold Nov 2, 2023

Choose a reason for hiding this comment

JReinhold Nov 2, 2023 • edited Loading

Choose a reason for hiding this comment

JReinhold Nov 2, 2023

Choose a reason for hiding this comment

JReinhold commented Nov 7, 2023

Vite

Webpack

ndelangen Nov 7, 2023

Choose a reason for hiding this comment

JReinhold Nov 7, 2023

Choose a reason for hiding this comment

shilman left a comment • edited Loading

Choose a reason for hiding this comment

Addons, core: Make `react` and Storybook packages `devDependencies` where possible #24676

Addons, core: Make `react` and Storybook packages `devDependencies` where possible #24676

JReinhold commented Nov 2, 2023 •

edited by storybook-bot

Loading

Testing `addon-essentials` with docs

Testing `addon-docs` directly

Testing `addon-essentials` with docs disabled

Testing without `addon-essentials` and `addon-docs`

JReinhold Nov 2, 2023 •

edited

Loading

shilman left a comment •

edited

Loading