[Tracking] Core package consolidation

shilman commented 6 months ago

RFC: https://github.com/storybookjs/storybook/discussions/27207 PR: https://github.com/storybookjs/storybook/pull/27039

Stage 1: The technical bits

### Consolidation
- [x] `@storybook/channels`
- [x] `@storybook/client-logger`
- [x] `@storybook/core-common`
- [x] `@storybook/core-events`
- [x] `@storybook/csf-tools`
- [x] `@storybook/docs-tools`
- [x] `@storybook/node-logger`
- [x] `@storybook/preview-api`
- [x] `@storybook/router`
- [x] `@storybook/telemetry`
- [x] `@storybook/theming`
- [x] `@storybook/types`
- [x] `@storybook/manager-api`
- [x] `@storybook/manager`
- [x] `@storybook/preview`
- [x] `@storybook/core-server`
- [x] `@storybook/builder-manager`
- [x] `@storybook/components`

### CI
- [x] All sandboxes pass on CI
- [x] Sandboxes can be linked and unlinked
- [x] can publish a canary

Metrics:

Storybook performance and size metrics

mealdrop	before	after
Storybook startup time	343ms (manager) and 315ms (preview)	314ms (manager) and 324ms (preview)
Storybook build time	104ms (manager) and 10.92s (preview)	97ms (manager) and 11.93s (preview)
Storybook build time (--test)	91 ms (manager) and 4.28s (preview)	85 ms (manager) and 4.72s (preview)
Storybook static dir size	21M	22M
node_modules size	523M	533M
node_modules install time	15,83s	13,02s
VTA hot/cold builds	1m24s	1m24s
packages added	+446	+325

React + Vite starter (Yarn)	before	after
Storybook startup time	199ms (manager) and 278ms (preview)	197ms (manager) and 320ms (preview)
Storybook build time	104 ms (manager) 3.31s (preview)	114 ms (manager) and 4.04s (preview)
Storybook build time (--test)	105ms (manager) and 3.33s (preview)	98ms (manager) and 3.72s (preview)
Storybook static dir size	6.9M	7.7M
node_modules size	280M	241M
node_modules install time	10.86s	6.44s
packages added	+635	+493

Nextjs sandbox (Yarn)	before	after
Storybook startup time	192ms (manager) and 2.79ms (preview)	195ms (manager) and 3.05ms (preview)
Storybook build time	104ms (manager) and 7.14s (preview)	112 ms (manager) and 7.68s (preview)
Storybook build time (--test)	106ms (manager) and 1.83s (preview)	96ms (manager) and 1.96s (preview)
Storybook static dir size	8.9M	11M
node_modules size	579M	553M
node_modules install time	10.59s	9.73s
packages added	+825	+716

Storybook Monorepo metrics

	before	after
monorepo compile time (dev)	49s	30s
monorepo compile time (prod)	2m 30s	2m 11s

Storybook initialization metrics

For storybook init times, we created a react-vite project using npx create-vite@latest then we ran the following commands (about 10 times):

# Storybook latest (8.1.10)
export CI=true && git checkout . && git clean -xdf && rm -rf $(npm get cache)/_npx && time npx storybook@latest init --yes

# Storybook canary  CPC (0.0.0-pr-27039-sha-65814b9a)
export CI=true && git checkout . && git clean -xdf && rm -rf $(npm get cache)/_npx && time npx storybook@0.0.0-pr-27039-sha-65814b9a init --yes

And from the results, we collected the fastest possible results from all runs.		before
init time	28,33s	23,10s
Storybook startup time	190ms (manager) and 261ms (preview)	189ms (manager) and 311ms (preview)
Storybook build time	98ms (manager) and 3.78 s (preview)	90ms (manager) and 4.15ms (preview)
Storybook build time (--test)	123 ms (manager) and 1.38 s (preview)	92ms (manager) and 1.65s (preview)
Storybook static dir size	4.9M	5.6M
node_modules size	275M	222M
node_modules install time (npm)	3.4s	2.5s
node_modules install time (pnpm)	3.0s	2.3s

time nr task compile -s install --no-link --debug

### Testing
- [x] test with `yarn dlx`
- [x] test with yarn classic
- [x] test with yarn berry (latest)
- [x] test with `pnpm dlx`
- [x] test with pnpm
- [x] test with `npx`
- [x] test with npm 10
- [ ] test with a pnpm monorepo
- [x] test with a yarn workspace monorepo
- [x] QA on bitwarden monorepo using `npm`

### Documentation
- [x] Polish up the PR description
- [x] Ensure the `maintenance.md` is updated correctly (`bun` requirement)
- [x] Add a `README.md` to `@storybook/core`
- [x] Amend the `README.md` for the `storybook` package

### Metrics
- [x] Get metrics

### Optionals
- [ ] https://github.com/storybookjs/storybook/pull/28346
- [ ] https://github.com/storybookjs/storybook/pull/28349
- [ ] https://github.com/storybookjs/storybook/pull/28046

### Follow up
- [ ] work out how to apply this change, and make react-native work

ndelangen commented 5 months ago

@shilman @vanessayuenn I'm guessing we won't be writing a blogpost then, if we want @storybook/core to be "private"?

I scrapped the Update the addon toolkit with the changes. work item.

Do we need a proper README.md for @storybook/core?

shilman commented 5 months ago

@ndelangen Correct--no blog post for this. Yes to README.md. It should document, at a high level, what the package is for and what people should do with it (at the moment, install it and that's about it). My $.02!

storybookjs / storybook