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: https://github.com/storybookjs/storybook/blob/19d75f066385e5afe01edbc78c6beabf938e90fe/code/lib/ui/package.json#L52

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: https://github.com/storybookjs/storybook/blob/19d75f066385e5afe01edbc78c6beabf938e90fe/code/lib/ui/package.json#L41-L43

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: https://github.com/storybookjs/storybook/blob/19d75f066385e5afe01edbc78c6beabf938e90fe/code/lib/ui/package.json#L22-L40

Then of-course we need to define what the valid entrypoints are of the package, that the script should bundle: https://github.com/storybookjs/storybook/blob/19d75f066385e5afe01edbc78c6beabf938e90fe/code/lib/ui/package.json#L96-L99 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: https://github.com/storybookjs/storybook/blob/19d75f066385e5afe01edbc78c6beabf938e90fe/code/lib/ui/package.json#L95 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"): https://github.com/storybookjs/storybook/blob/19d75f066385e5afe01edbc78c6beabf938e90fe/code/addons/controls/package.json#L93

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	☒	https://github.com/storybookjs/storybook/pull/18772
addons/actions	@Saunved	☒	https://github.com/storybookjs/storybook/pull/18775
addons/backgrounds	@Saunved	☒	https://github.com/storybookjs/storybook/pull/18784
addons/controls	@Saunved	☒	https://github.com/storybookjs/storybook/pull/18786
addons/docs	@ndelangen	☐
addons/essentials	@jeangregorfonrose	☒	https://github.com/storybookjs/storybook/pull/19322
addons/highlight	@bryanjtc	☒	https://github.com/storybookjs/storybook/pull/19483
addons/interactions	@Ianvs	☒	https://github.com/storybookjs/storybook/pull/19139
addons/jest	@luciana-mendonca	☒	https://github.com/storybookjs/storybook/pull/18836
addons/links	@luciana-mendonca	☒	https://github.com/storybookjs/storybook/pull/18908
addons/measure	@luciana-mendonca	☒	https://github.com/storybookjs/storybook/pull/18837
addons/outline	@luciana-mendonca	☒	https://github.com/storybookjs/storybook/pull/18842
addons/storysource	@bryanjtc	☒	https://github.com/storybookjs/storybook/pull/19482
addons/toolbars	@luciana-mendonca	☒	https://github.com/storybookjs/storybook/pull/18847
addons/viewport	@luciana-mendonca	☒	https://github.com/storybookjs/storybook/pull/18943
frameworks/angular	LOOKING FOR ANGULAR EXPERT	☐	https://github.com/storybookjs/storybook/pull/19036
frameworks/ember	LOOKING FOR EMBER EXPERT	☐
lib/addons	@abdlqader	☒	https://github.com/storybookjs/storybook/pull/18805
lib/api	@ndelangen	☒	https://github.com/storybookjs/storybook/pull/19269
lib/builder-webpack5	@tolkadot	☐
lib/channel-postmessage	@javier-arango	☒	https://github.com/storybookjs/storybook/pull/19388
lib/channel-websocket	@SeepG	☐
lib/channels	@B2Y4N	☒	https://github.com/storybookjs/storybook/pull/18882
lib/cli	@ianvs	☒	https://github.com/storybookjs/storybook/pull/19138
lib/client-api	@ndelangen	☒	https://github.com/storybookjs/storybook/pull/19271
lib/client-logger	@ezmnysniper7	☒	https://github.com/storybookjs/storybook/pull/18893
lib/codemod	@Platiplus	☒	https://github.com/storybookjs/storybook/pull/19398
lib/core-client	@ndelangen	☒	https://github.com/storybookjs/storybook/pull/19276
lib/core-events	@abdlqader	☒	https://github.com/storybookjs/storybook/pull/18798
lib/core-server	@ndelangen	☐	https://github.com/storybookjs/storybook/pull/19278
lib/core-webpack	@GanHingLong0423	☒	https://github.com/storybookjs/storybook/pull/18912
lib/csf-tools	@ianvs	☒	https://github.com/storybookjs/storybook/pull/19141
lib/docs-tools	@darenbt	☒	https://github.com/storybookjs/storybook/pull/19206
lib/instrumenter	@darenbt	☒	https://github.com/storybookjs/storybook/pull/19206
lib/node-logger	@hayawata3626	☒	https://github.com/storybookjs/storybook/pull/19173
lib/postinstall	@tolkadot	☒	https://github.com/storybookjs/storybook/pull/19327
lib/preview-web	@javier-arango	☐	https://github.com/storybookjs/storybook/pull/19319
lib/router	@hayawata3626	☒	https://github.com/storybookjs/storybook/pull/19140
lib/source-loader	@shariqx5	☒	https://github.com/storybookjs/storybook/pull/19313
lib/store	@javier-arango	☒	https://github.com/storybookjs/storybook/pull/19308
lib/telemetry	@tolkadot	☒	https://github.com/storybookjs/storybook/pull/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: https://github.com/storybookjs/storybook/blob/40ccd9240319858d04cc0c5da7a15191314f379d/scripts/prepare/bundle.ts#L61 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.

[abdlqader]

I would like to take the first 5 in lib directory. @ndelangen

[luciana-mendonca]

Hi @ndelangen 👋🏻

I would like to contribute! Is it possible to take the rest of the addons/* packages?

addons/jest 
addons/links  
addons/measure  
addons/outline  
addons/storysource  
addons/toolbars  
addons/viewport

[B2Y4N]

Hi @ndelangen

This is my first time and I would like to contribute! Can I take the lib/channels package?

[josh-the-dev]

Can help out with lib/csf-tools ! Love the idea 👍 !

[maytheu]

Hi @ndelangen

I would love to pick the lib/core-client and lib/codemod

[ayush9398]

@shilman Are the packages mentioned without assignees available? If so, can I take them up?

[shilman]

@B2Y4N @josh-the-dev @maytheu thanks! i've updated the issue description. looking forward to your PRs!

@ayush9398 yes, which ones would you like to take?

[IanVS]

FWIW, it looks like the esrun part is no longer required.

[ayush9398]

For starters can work on both framework packages first.

frameworks/angular 
frameworks/ember

[ayush9398]

@shilman I have opened a PR but my tests are failing, can you please review it?

[IanVS]

I see that lib/router isn't in the list. Should it be, or is there a reason not to convert it?

[hayawata3626]

Hi @ndelangen

I would like to contribute! Is it possible below?

lib/client-api
lib/client-logger

I will work on it if possible.

[ndelangen]

@hayawata3626 yeah awesome! thanks!, I would suggest you start with lib/client-logger.

[ndelangen]

@IanVS ow, yes! lib/router can be converted as well!

[hayawata3626]

@ndelangen Thanks for the reply! I checked, and it looks like it's already handled.

• https://github.com/storybookjs/storybook/blob/next/code/lib/client-logger/package.json#L42
• https://github.com/storybookjs/storybook/pull/18893

I would like try the others if possible. lib/router？

[IanVS]

Should @storybook/cli-storybook and @storybook/cli-sb even have a prep script? They don't seem to have been generating any dist folders previously, and I can't think what the entries would be.

[ndelangen]

Should @storybook/cli-storybook and @storybook/cli-sb even have a prep script? They don't seem to have been generating any dist folders previously, and I can't think what the entries would be.

No they probably do not need a prep script at all!

[darenbt]

Hi @ndelangen, I'm hoping to contribute to your codebase by converting these json packages:

lib/docs-tools
lib/instrumenter

Would it be possible for me to work on these? If so, I'll be submitting a PR in the near future.

[hayawata3626]

Hi @ndelangen!

I would like to contribute again. Is it possible below?

lib/node-logger

[Saunved]

I've been on vacation the last month! I'll pick up the pending packages in the next day or so 🤞

[javier-arango]

Hi @ndelangen

I would love to help you guys with this. Is it possible I can help converting these packages:

addons/actions
addons/storysource

[IanVS]

I think it's not necessary to ask for permission. I suggest claiming them when you start working on them, just so others can know that they shouldn't start working on the same ones. I've added all the recent volunteers to the list at the top.

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.33 containing PR #19140 that references this issue. Upgrade today to the @future 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.

[jeangregorfonrose]

Hi, @ndelangen, I want to contribute to the codebase by converting these packages addons/essentials lib/addons

[ndelangen]

@jeangregorfonrose addons/essentials should be very straight-forward!

I think lib/addons has been attempted before and was running into issues. #18805

[LuisChiej]

@ndelangen, I could pick up lib/channels and lib/channel-websocket