Call for help: Migrating to modern build tool : TSUP

[ndelangen]

Hey friends!

If you're looking for a way to contribute to storybook's codebase, i might have a few small-ish tasks most people should be able to pick up!

We're in the process of migrating away from having custom scripts to prepare out packages for publishing to npm.
We've used babel and tsc to generate a modern, esm, and cjs output (in different directories.

We've picked a new tool that's better because:

• it bundles: meaning storybook can become less dependent on npm modules, de-duplicating etc.
• it's fast, faster then running babel multiple times, and running tsc
• it can generate typescript definition files that are also bundled

I've developed a wrapper around this tool called ts-up https://tsup.egoist.sh/#code-splitting

How does this script work?

here: https://github.com/storybookjs/storybook/blob/19d75f066385e5afe01edbc78c6beabf938e90fe/scripts/prepare/bundle.ts

And the way we use it in our packages:

storybook/code/lib/ui/package.json

Line 52 in 19d75f0

"prep": "../../../scripts/prepare/bundle.ts"

The script generates files in a different place (it does not generate into sub-directories):

• entrypoint.js (cjs)
• entrypoint.mjs (esm)
• entrypoint.d.ts (definitions)

So the references in package.json need to be updated:

storybook/code/lib/ui/package.json

Lines 41 to 43 in 19d75f0

	"main": "dist/index.js",
	"module": "dist/index.mjs",
	"types": "dist/index.d.ts",

In addition to the above, we should also add a exports field in package.json, we need to add 1 for each entrypoint of the package, and also add a field for package.json file:

storybook/code/lib/ui/package.json

Lines 22 to 40 in 19d75f0

	"exports": {
	".": {
	"require": "./dist/index.js",
	"import": "./dist/index.mjs",
	"types": "./dist/index.d.ts"
	},
	"./dist/runtime": {
	"require": "./dist/runtime.js",
	"import": "./dist/runtime.mjs",
	"types": "./dist/runtime.d.ts"
	},
	"./dist/globals": {
	"require": "./dist/globals.js",
	"import": "./dist/globals.mjs",
	"types": "./dist/globals.d.ts"
	},
	"./paths": "./paths.js",
	"./package.json": "./package.json"
	},

Then of-course we need to define what the valid entrypoints are of the package, that the script should bundle:

storybook/code/lib/ui/package.json

Lines 96 to 99 in 19d75f0

	"entries": [
	"./src/index.tsx",
	"./src/globals.ts",
	"./src/runtime.ts"

For most packages, this will likely just be 1 file.

If there's some code that needs to run before the bundling process, like generating a file:

storybook/code/lib/ui/package.json

Line 95 in 19d75f0

"pre": "./scripts/generate-exports-file.ts",

Though this is not super common.

And if the package only runs in node or the browser, and you're getting errors about missing globals, you might need to specify the "platform" ("browser" or "node"):

storybook/code/addons/controls/package.json

Line 93 in 19d75f0

"platform": "browser"

After applying the changes, run yarn install in the root of the project,

Then run yarn build <name of package> to see if the bundling works.
If it does, then we still need to check if it actually works.
That we can do by running the CI. If we wanted to test locally, run 1 of the examples, using the package.

Then run yarn check <name of package> to see if the bundling caused any TypeScript issues.

So we could use your help migrating all of out packages to use this new script!

Here's a list of packages we could use your help with:

package name	assign to	completed	PR
addons/a11y	@Saunved	☒	#18772
addons/actions	@Saunved	☒	#18775
addons/backgrounds	@Saunved	☒	#18784
addons/controls	@Saunved	☒	#18786
addons/docs	@ndelangen	☒	#19790
addons/essentials	@jeangregorfonrose	☒	#19322
addons/highlight	@bryanjtc	☒	#19483
addons/interactions	@IanVS	☒	#19139
addons/jest	@luciana-mendonca	☒	#18836
addons/links	@luciana-mendonca	☒	#18908
addons/measure	@luciana-mendonca	☒	#18837
addons/outline	@luciana-mendonca	☒	#18842
addons/storysource	@bryanjtc	☒	#19482
addons/toolbars	@luciana-mendonca	☒	#18847
addons/viewport	@luciana-mendonca	☒	#18943
frameworks/angular	LOOKING FOR ANGULAR EXPERT	☒	#19036
frameworks/ember	LOOKING FOR EMBER EXPERT	☒	#20524
lib/addons	@abdlqader	☒	#18805
lib/api	@ndelangen	☒	#19269
lib/builder-webpack5	@ndelangen	☒
lib/channel-postmessage	@javier-arango	☒	#19388
lib/channel-websocket	@bryanjtc	☒	#19694
lib/channels	@B2Y4N	☒	#18882
lib/cli	@IanVS	☒	#19138
lib/client-api	@ndelangen	☒	#19271
lib/client-logger	@ezmnysniper7	☒	#18893
lib/codemod	@Platiplus	☒	#19398
lib/core-client	@ndelangen	☒	#19276
lib/core-events	@abdlqader	☒	#18798
lib/core-server	@ndelangen	☒	#19278
lib/core-webpack	@GanHingLong0423	☒	#18912
lib/csf-tools	@IanVS	☒	#19141
lib/docs-tools	@darenbt	☒	#19206
lib/instrumenter	@darenbt	☒	#19206
lib/node-logger	@hayawata3626	☒	#19173
lib/postinstall	@tolkadot	☒	#19327
lib/preview-web	@javier-arango and @ndelangen	☒	#19319 - #19655
lib/router	@hayawata3626	☒	#19140
lib/source-loader	@shariqx5	☒	#19313
lib/store	@javier-arango	☒	#19308
lib/telemetry	@tolkadot	☒	#19317

So if you'd like to help converting any of these ♥️ ! Please mention here, which ones, you can take on, and open a PR converting a package.

There are details on how to do it, in the "How does this script work" <details/> in this issue.
If you need any help, please reach out to storybook maintainers on the contributing channel on the Storybook discord.

[ndelangen]

A few other packages have already been converted, mostly by me, so you can also use those as examples!

As a possible additional step:
The bundling script will bundle any dependencies declared in the devDependencies field in package.json.
So what we can do with this, is move dependencies defined in dependencies and move them to devDependencies, and when we do, those dependencies will become bundled in, in the output. The advantage of this is, that users won't need to install that package at all, because it becomes build-in.

[JReinhold]

Great initiative!

As a possible additional step: The bundling script will bundle any dependencies declared in the devDependencies field in package.json. So what we can do with this, is move dependencies defined in dependencies and move them to devDependencies, and when we do, those dependencies will become bundled in, in the output. The advantage of this is, that users won't need to install that package at all, because it becomes build-in.

I can see in the script at:

storybook/scripts/prepare/bundle.ts

Line 61 in 40ccd92

external: [name, ...Object.keys(dependencies || {}), ...Object.keys(peerDependencies || {})],

that the wrapper adds all dependencies as external. Wouldn't it be easier to just not do that, and then don't move all dependencies to devDependencies? I know it's default tsup to not bundle dependencies, so maybe your rationale is to follow the default?

EDIT:
After sleeping on it I realize that if we kept the deps as dependencies, the package manager would probably still install them as transitive dependencies even though they were bundled, which would be the worst of both worlds.
So probably disregard everything I wrote above.

[Saunved]

@ndelangen Hi, I would like to pick up the first 8 packages from this list, viz. from addons/a11y to addons/interactions.
If time permits, and if there aren't other takers, I could pick up a few more. Thanks!

[italoteix]

Since @Saunved is doing top -> bottom, I would like to also pick some and I'll do it bottom -> top and at least do 8 packages.

[SeepG]

Haven't been able to look at 😞 lib/channel-websocket, if anyone is interested please feel free to pick it up.

[bryanjtc]

@SeepG I can

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.49 containing PR #19790 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.51 containing PR #19694 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.53 containing PR #19895 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.15 containing PR #20134 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.20 containing PR #20150 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.21 containing PR #20156 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

@ndelangen Is this done? I recall that you had a fix for builder-webpack5 somewhere?