It's mostly the same setup it just needs a pnpm workspaces file and if you have apps and packages in the same repo you may want to ignore publishing apps to npm using the changesets config.
@@kevinzunigacuellar I don't want to ignore publishing and changeset config though. What I mean was the monorepo with tool like Nx or Turborepo we can publish multiple packages to npm with Lerna.
I second this--I just tried setting up my first monorepo a few days ago and it took me close to a full day to get everything figured out (like how pnpm uses -F instead of -w like npm, but -w means something else, and weird stuff happened). I know there's official documentation out there, but there are so many different tools, each more complex then the last, and I think a ~5 minute high quality starter video would be extremely helpful instead of wasting 6 hours A few things that have personally confused me about monorepos: What packages should be installed at the top level package.json vs the ones in packages? What about defining subpackages as dependencies of the root package.json? Or as "references" in the root tsconfig? Does that mean you should/shouldn't have the tsconfigs of each package extend from the root package? Again, I know there is "official" documentation about all these things, but it can be very confusing if you're not already familiar with it, and every boilerplate I find does things slightly differently without explaining why. Thanks, Matt!
Loved the pace of this video. Excellent job getting right to the point without over-explaining things we already know. I wish more TH-cam videos were like this!
I spent HOURS figuring out how to publish a TS package with esm and cjs module about 6 months ago, and I never even heard of tsup.... I'm actually excited to go make upgrades! 12/10 video! Thank you
I've been running around in circles all day trying to figure out how to bundle my TS package properly in a way that let's it work properly with 'npm link'. Finally, _finally,_ I've found a video that gives a working process (and in a very concise, easily digestible manner at that)-thank you.
I have learned quite a lot under 4 minutes. Quite an achievement actually. I just found out about tsc being a linter for my project, and use it along with other compilers like tsup. Thank you so much for making this awesome, educational, and straightforward video! 🍻
I really can't thank you enough for this condensed video. The pace made me struggle the first time I watched the video a while ago, but now that I needed the instructions, I know that this pace is all I needed!
supporting both cjs and esm is a nice touch; its really frustrating how many popular npm modules just did a hard cut to esm expecting their dependents to be able switch easily.
Hi. I am one of those package developers who did a hard cut to ESM. I decided against continuing to support CJS because it is 1. No longer the standard that should be used and 2. Generally a headache to support both CJS and ESM in more complex projects.
@@litbro8180 I am sure there are specific situations where a more complex library would not be able to easily support both but there are many instances where a relatively simple, but popular module has transitioned and left dependents in the dust. I currently have the misfortune of maintaining a few older and very troublesome nodejs projects at work that for various reasons cannot be easily transitioned to esm. I have several dependencies that no longer support cjs and despite the authors/maintainers stating that the cjs version would continue to receive support, my `npm audit` results look worse and worse every month. I agree that esm is the new standard that we all should strive for but cjs is still widely in use and broadly speaking, and as demonstrated in this video, it is not difficult to support both.
@@sfulibarri We have that with all the time, we want to update lib x, because it has bug fixes/features we want.. but x has the dependency on y, when y is used, then lib z breaks... its all very annoying..
Great video! You did an excellent job of breaking down the complex process and making it easy to understand. I appreciate the clear explanations and step-by-step instructions for publishing npm packages. Keep up the good work!
Awesome video !! it would be amazing if you could make a video on how to setup a typescript project with all the tsc, eslint, prettier with vscode. Yeah it's 2023 and I still get confused with all these packages.
Really nice, concise and complete guide. Thanks 👍 Regarding the versioning and release notes, I much prefer to use semantic-release: You just need to name your PRs/commits according to a convention, and you'll get automation SemVer and changelog for free, with the side benefit of better PR/commit messages.
College probably breaks all the simplest procedures down to very complex ones to understand like how it works on a technical level. This video demonstrates the steps to actually reach your goal, without proper understanding of what the step was intended for and etc. Anyways, Matt did a great job for making this simple and understandable at the same time!
@@grgry06 Mostly it was because they decided to teach us a made-up language for the first half of the year. Only in the second half, they started teaching us python, where I literally had to explain to my teacher how to print a string to the console, when I hadn't even programmed in python before. Anyways, the only thing I really learned that year was what scrum was, and what UML was. Of course, both are very useful skills to have, however, they were taught in such a way that no one really knew what they were in the end. And I actually only learned these skills while working on personal projects about two years later.
This video is a nice quick overview on what things to do. But it also creates lots of questions on why to do those things, and also what they do in specific. A bit more details on some of those things would be nice, like what's that licensing and why do we choose that over others? What do github workflows work? How does npm actually know that I deployed things to it? Maybe in a different video
BTW if you are a noob like me and you are using Inquirer to present prompts, in "scripts" you can add `"start": "node dist/index.js"` and to test it just run the command `npm (or pnpm) run start`. Don't know if it is the best way to do it but it works for me when I wanted to test my baby :).
Great video! Would you please make a video about the configuration of the setup of a project with microfrontends, a components library, typescript and possibly tailwind?
I followed your video till the end. Definitely gained confidence on few things. This video does not publish the packages though. Just creates a PR. I would definitely love to see the complete picture. If you have a course to setup pnpm, turborepo, tsup and related course, please share the link
Very educative video. Keep them coming Matt. Quick question. Is something like this going to be added in total typescript maybe like deep dive or something
Yeah I was trying to figure out why changesets was giving me error "Failed to find where HEAD diverged from main. All I had was a local git repo at this point. Thanks
I would love to have a long form video about each of those topics all alone for maximum understanding… it could be fast paced I love it when it is fast but it should be going more into the details… 🎉🎉🎉🎉
I used the bundler and now I am getting a bunch of errors of these 2 types. Does anyone please know how to fix this? The inferred type of 'router' cannot be named without a reference to '.pnpm/@types+express@4.17.17/node_modules/@types/express'. This is likely not portable. A type annotation is necessary. Property 'app' of exported class expression may not be private or protected.ts(4094)
great video .we need someone of your calbre to fork tsdx and update the dependancies , or even better give us a short tutorial on making a componernt library with rollup , tailwind and code splitting
Ho other people are asking about monorepo stuff and they do deserve to learn all that jazz from you 😅 oh - Me? No I am just asking for a friend… I am using multi root VSCode workspaces and I started using the Rush Stack but I feel like it is not something that is convivial enough for my workflow 😮
Awesome video/videos, thanks! Heads up for a newbie question.. When you publish the package to NPM would you publish it with the same package.json as you have when coding the package? I guess that the final package sent to NPM does not need/need to know the dependency to tsup now when the source code is bundled? Even if they are set as 'devDependencies' do we really need to include them in the final package.json at all?
I'm in Windows and I can't run npm changeset. Does anyone else have this problem or know a solution? Thanks. **Update** You have to run npx changeset, but now I'm getting Error: Failed to find where HEAD diverged from main. Does main exist?
Hey Matt, this is the perfect video for me although I'm not sure it does exactly what it says on the tin - perhaps I'm doing something wrong but does it actually publish to npm or is that an additional step? One more thing I had to change the github actions settings by doing the following; my-package repo => settings => actions => general => Workflow permissions 1. Choose Read and write permissions 2. Tick Allow GitHub Actions to create and approve pull requests
This looks awesome, but my main question around changeset is how to add it in the context of a monorepo (lets say with turborepo). Video idea right there!
Really packed with info. Well done. But sometimes I like to debug(with breakpoints) the code from the libraries I use. Being compiled from TS to JS, the code is almost impossible to look at. Is there a way to see the Typescript code in the library instead of the uglified version?
Nice video. One thing isn't fully clear though. Am I right in saying that with changesets the commit messages don't matter and. the semver bump info is taken fully from when the contributor runs pnpm changeset?
Commit messages still matter, but they don't contribute to the release notes. This means you can tailor your changesets to changes that are _user-facing_, which is much better.
One part of the flow I'm confused about is when the changeset action creates a PR? So for example, a changeset would be created in a feature PR and then that would get merged into main. After the feature PR is merged into main, is that when the action creates the new PR for bumping the version and adding the changeset to the changelog? Then once that's merged it publishes the package?
I'll have a look up tsup, I'm still using rollup with a package to generate my configs that I had to write myself, but I'm currently stuck looking for monorepo solutions because yarn classic is falling apart in that codebase (I literally cannot upgrade dependencies anymore and have to run yarn install like 3 times to resolve dependencies properly...). pnpm broke eslint for me with how it handles its node_modules dirs so that didn't help either. How does tsup handle multiple entry points? I have some packages split up with the exports key in package.json so cjs consumers still somewhat treeshake (I think nextjs still consumes the cjs bundles).
I would love to see an updated video for releasing a npm package. Specificaly, where you also walkthrough how to configure the github actions and getting it completely released. You said nothing about it in this video. There are also a few mistakes in this video, e.g. you never added the release script. Love your videos in general, but would love a better video about this topic
Is it possile to configure tsup to not put all my code into a single "index.js" file in dist folder? I'd rather keep it in the file structure i have but in JS
Also, I wouldn't advise this - it means that unintended entrypoints of your package are exposed to the user. Use the entrypoints configuration if you want that.
Would a node esm project know to import the `.mjs` files though? What happens when you import other source modules? How does node/the browser (wherever the package is consumed) know which file extension to use? Will the final package only work in bundled environments?
the amount of info you can pack in one video plus the clarity of the sentences is remarkable
Just awesome. It would be amazing if you make video about monorepo version of that with multiple packages.
It's mostly the same setup it just needs a pnpm workspaces file and if you have apps and packages in the same repo you may want to ignore publishing apps to npm using the changesets config.
@@kevinzunigacuellar I don't want to ignore publishing and changeset config though. What I mean was the monorepo with tool like Nx or Turborepo we can publish multiple packages to npm with Lerna.
Changesets supports pnpm mono repos, it's super easy to setup. There is even information on the pnpm docs for changesets
I second this--I just tried setting up my first monorepo a few days ago and it took me close to a full day to get everything figured out (like how pnpm uses -F instead of -w like npm, but -w means something else, and weird stuff happened). I know there's official documentation out there, but there are so many different tools, each more complex then the last, and I think a ~5 minute high quality starter video would be extremely helpful instead of wasting 6 hours
A few things that have personally confused me about monorepos: What packages should be installed at the top level package.json vs the ones in packages? What about defining subpackages as dependencies of the root package.json? Or as "references" in the root tsconfig? Does that mean you should/shouldn't have the tsconfigs of each package extend from the root package? Again, I know there is "official" documentation about all these things, but it can be very confusing if you're not already familiar with it, and every boilerplate I find does things slightly differently without explaining why. Thanks, Matt!
Changesets + 1
You taught in 3 mins, something, most can't do in 30 mins.
That too so clearly.
Brilliant 👌
Thanks a lot 🙏 😊
Loved the pace of this video. Excellent job getting right to the point without over-explaining things we already know. I wish more TH-cam videos were like this!
Never seen this person''s vids before, but I subscribed after ~1 minute of watching this for the exact reasons you noted. EXCELLENT pacing.
I spent HOURS figuring out how to publish a TS package with esm and cjs module about 6 months ago, and I never even heard of tsup.... I'm actually excited to go make upgrades! 12/10 video! Thank you
I've been running around in circles all day trying to figure out how to bundle my TS package properly in a way that let's it work properly with 'npm link'. Finally, _finally,_ I've found a video that gives a working process (and in a very concise, easily digestible manner at that)-thank you.
I have learned quite a lot under 4 minutes. Quite an achievement actually. I just found out about tsc being a linter for my project, and use it along with other compilers like tsup. Thank you so much for making this awesome, educational, and straightforward video! 🍻
I really can't thank you enough for this condensed video.
The pace made me struggle the first time I watched the video a while ago, but now that I needed the instructions, I know that this pace is all I needed!
This is amazing! All the hows and whys in under 4 minutes!! Thank you so much for that!
supporting both cjs and esm is a nice touch; its really frustrating how many popular npm modules just did a hard cut to esm expecting their dependents to be able switch easily.
Hi. I am one of those package developers who did a hard cut to ESM. I decided against continuing to support CJS because it is 1. No longer the standard that should be used and 2. Generally a headache to support both CJS and ESM in more complex projects.
@@litbro8180 I am sure there are specific situations where a more complex library would not be able to easily support both but there are many instances where a relatively simple, but popular module has transitioned and left dependents in the dust. I currently have the misfortune of maintaining a few older and very troublesome nodejs projects at work that for various reasons cannot be easily transitioned to esm. I have several dependencies that no longer support cjs and despite the authors/maintainers stating that the cjs version would continue to receive support, my `npm audit` results look worse and worse every month. I agree that esm is the new standard that we all should strive for but cjs is still widely in use and broadly speaking, and as demonstrated in this video, it is not difficult to support both.
@@sfulibarri We have that with all the time, we want to update lib x, because it has bug fixes/features we want.. but x has the dependency on y, when y is used, then lib z breaks... its all very annoying..
I just across your channel. Can't belive I've been missing all of these golden content for all these days!
When Matt uploads a new video, we know it’s going to be a new useful knowledge. You’re awesome..❤
bro your videos are getting better and better
really nice format and I like that you kinda just focus on the important parts
thumbs up 👍
Thank you so much. Would appreciate more videos like this one where you teach us how to create and maintain or manage our own packages.
Probably one of the best informative videos I’ve seen in a long time
Great video! You did an excellent job of breaking down the complex process and making it easy to understand. I appreciate the clear explanations and step-by-step instructions for publishing npm packages. Keep up the good work!
You made me watch a 3 minutes video in 40 minutes, the content is just too good. Big thanks :)
Love it. I have been doing my old export to only cjs for a while now. It’s about time my workflow for publish gets a upgrade
Thank you for this. Learning to release my first library and this came in time!
Awesome, thank you. Good introduction to tsup will help me to get rid of my overkill rollup setup.
Seriously I had lost hope to support CommonJS and ES6 imports and publish a package ... but at last found your video ... Tks man!!
This is exactly what I was looking for. Thank you very much Matt!
This is such a great reference!! Thank you
Would love to see the Deno version next
Succinct and to thew point. Than you for this.
Gonna take a look at tsup.
Awesome video !! it would be amazing if you could make a video on how to setup a typescript project with all the tsc, eslint, prettier with vscode. Yeah it's 2023 and I still get confused with all these packages.
OMG
yes, please :D
What a great knowledge dump. Love these sorts of videos.
Wow. I have been missing out on A LOT. Thanks you so much!
Really liked this one Matt 👏🏻 It’s been a long since I’ve published something so the next time I might go with this setup 👌🏻
Great summary, just what I was looking for. Nice pace also!
great and concise tutorial! makes me wanna build an npm package even though i have nothing to share xD
Really nice, concise and complete guide. Thanks 👍
Regarding the versioning and release notes, I much prefer to use semantic-release: You just need to name your PRs/commits according to a convention, and you'll get automation SemVer and changelog for free, with the side benefit of better PR/commit messages.
Ain't no-one going to shift me off changesets, it's just the bomb.
@@mattpocockuk can you get the commit messages of the PR grouped by " type:" with changests?
mandatory algorithmic signal boost, because this video is great and more people should see it!
Thank you so much Matt Pocock
I was using tsc for builds, but tsup is so much better, thank you!!
This was great! Fast is good, people
Amazing content. Loved it. Thanks a lot 🙏
How on earth is this video only 4 minutes? It taught me more than my first year of college lol.
College probably breaks all the simplest procedures down to very complex ones to understand like how it works on a technical level. This video demonstrates the steps to actually reach your goal, without proper understanding of what the step was intended for and etc. Anyways, Matt did a great job for making this simple and understandable at the same time!
@@grgry06 Mostly it was because they decided to teach us a made-up language for the first half of the year. Only in the second half, they started teaching us python, where I literally had to explain to my teacher how to print a string to the console, when I hadn't even programmed in python before. Anyways, the only thing I really learned that year was what scrum was, and what UML was. Of course, both are very useful skills to have, however, they were taught in such a way that no one really knew what they were in the end. And I actually only learned these skills while working on personal projects about two years later.
This video is a nice quick overview on what things to do. But it also creates lots of questions on why to do those things, and also what they do in specific. A bit more details on some of those things would be nice, like what's that licensing and why do we choose that over others? What do github workflows work? How does npm actually know that I deployed things to it?
Maybe in a different video
Yep, I'm thinking with these style of videos a big-picture idea is the best thing I can deliver. Whet your appetite and spark a googling session!
I'd recommend the `wireit` script runner developed by google for all but the most simple `npm run` scripts.
BTW if you are a noob like me and you are using Inquirer to present prompts, in "scripts" you can add `"start": "node dist/index.js"` and to test it just run the command `npm (or pnpm) run start`. Don't know if it is the best way to do it but it works for me when I wanted to test my baby :).
Clear and concise video.👍👍
I’m really liking your videos!!
outstanding, thank you
Great and simple. We are using Vite to create some projects and libraries too.
🤯 Amazing video
Great video! Would you please make a video about the configuration of the setup of a project with microfrontends, a components library, typescript and possibly tailwind?
keep going brother, keep going
the module field is kinda deprecated and not supported by all bundlers, the exports field is where it's at. Otherwise great video!
Awesome video ❤️
I followed your video till the end. Definitely gained confidence on few things. This video does not publish the packages though. Just creates a PR. I would definitely love to see the complete picture. If you have a course to setup pnpm, turborepo, tsup and related course, please share the link
Very educative video. Keep them coming Matt. Quick question. Is something like this going to be added in total typescript maybe like deep dive or something
Very helpful.
Brilliant!
If anyone is following this video, before"Changesets" add a github repo with a main branche, just a file is ok
Yeah I was trying to figure out why changesets was giving me error "Failed to find where HEAD diverged from main. All I had was a local git repo at this point. Thanks
This is great! Any chance you could do a GitLab version of the video?
Great video, but I would love to watch the unabridged version which moves more slowly and goes through everything line by line.
I would love to have a long form video about each of those topics all alone for maximum understanding… it could be fast paced I love it when it is fast but it should be going more into the details… 🎉🎉🎉🎉
sir, you are so good
I used the bundler and now I am getting a bunch of errors of these 2 types. Does anyone please know how to fix this?
The inferred type of 'router' cannot be named without a reference to '.pnpm/@types+express@4.17.17/node_modules/@types/express'. This is likely not portable. A type annotation is necessary.
Property 'app' of exported class expression may not be private or protected.ts(4094)
great video .we need someone of your calbre to fork tsdx and update the dependancies , or even better give us a short tutorial on making a componernt library with rollup , tailwind and code splitting
couldn' get the changeset part please make a video about it
Amazing!
Hi Matt you should check out dnt, by far the best way to create npm packages IMO :)
Awesome stuff
Would be curious to see how would you set up a react library to publish to npm 👀
Ho other people are asking about monorepo stuff and they do deserve to learn all that jazz from you 😅 oh - Me? No I am just asking for a friend… I am using multi root VSCode workspaces and I started using the Rush Stack but I feel like it is not something that is convivial enough for my workflow 😮
Awesome video/videos, thanks! Heads up for a newbie question.. When you publish the package to NPM would you publish it with the same package.json as you have when coding the package? I guess that the final package sent to NPM does not need/need to know the dependency to tsup now when the source code is bundled? Even if they are set as 'devDependencies' do we really need to include them in the final package.json at all?
That's what devdependencies are for!
He is the real wizard
Kudos to making it short!
Now its time to do it with the Bun bundler :D
I'm in Windows and I can't run npm changeset. Does anyone else have this problem or know a solution? Thanks. **Update** You have to run npx changeset, but now I'm getting Error: Failed to find where HEAD diverged from main. Does main exist?
Love this... Would this work with a mono-repo style where you have several packages all with differing versions?
This is what I looking for
Hey Matt, this is the perfect video for me although I'm not sure it does exactly what it says on the tin - perhaps I'm doing something wrong but does it actually publish to npm or is that an additional step?
One more thing I had to change the github actions settings by doing the following;
my-package repo => settings => actions => general => Workflow permissions
1. Choose Read and write permissions
2. Tick Allow GitHub Actions to create and approve pull requests
I'm sure the Changesets docs can help!
Can you make a video combining this stack with turborepo?
This looks awesome, but my main question around changeset is how to add it in the context of a monorepo (lets say with turborepo). Video idea right there!
Just add it! It's designed for monorepos.
Should I follow these steps or your new article about publishing on npm?
New article, more up to date
Really packed with info. Well done.
But sometimes I like to debug(with breakpoints) the code from the libraries I use. Being compiled from TS to JS, the code is almost impossible to look at. Is there a way to see the Typescript code in the library instead of the uglified version?
Awesome! Could you make a tutorial of you how to this while using bun?
Probably exactly the same but with a different install step?
@@mattpocockuk Does ts paths work too?
You should add "exports" in your package.json too
do you have example?
Nice video. One thing isn't fully clear though. Am I right in saying that with changesets the commit messages don't matter and. the semver bump info is taken fully from when the contributor runs pnpm changeset?
Commit messages still matter, but they don't contribute to the release notes. This means you can tailor your changesets to changes that are _user-facing_, which is much better.
I haven't looked this up, but what would be the difference between "noEmit" and "tsup"?
One part of the flow I'm confused about is when the changeset action creates a PR? So for example, a changeset would be created in a feature PR and then that would get merged into main. After the feature PR is merged into main, is that when the action creates the new PR for bumping the version and adding the changeset to the changelog? Then once that's merged it publishes the package?
Could you add tests to this and how you would expose some scripts using the bin property in package.json
What’s the advantages of using pnpm? I see everyone switching
As I say in the video, it's got the best cache in the business.
@@mattpocockuk yeah I heard that, but just caching?
@@bob_kazamakis Caches make things faster. So, it's really fast.
Also, I really like how it doesn't do hoisting in monorepos. A lot more predictable.
Thank Matt. Any idea how I can build to a single .js file that could be hosted on a CDN?
does it work for building backend nodejs library? Should we bundle backend nodejs libraries?
Amazing video! But how good it changesets for beta releases?
Great!
Too much info. I'll come back later. But I'll return.
Did you return?
@@smcalpha yes, I published two of my own on npm.
I'll have a look up tsup, I'm still using rollup with a package to generate my configs that I had to write myself, but I'm currently stuck looking for monorepo solutions because yarn classic is falling apart in that codebase (I literally cannot upgrade dependencies anymore and have to run yarn install like 3 times to resolve dependencies properly...). pnpm broke eslint for me with how it handles its node_modules dirs so that didn't help either.
How does tsup handle multiple entry points? I have some packages split up with the exports key in package.json so cjs consumers still somewhat treeshake (I think nextjs still consumes the cjs bundles).
tsup.egoist.dev/#multiple-entrypoints
On using "type": "module", config change to "main": "dist/index.cjs", "module": "dist/index.js". Right ?
Nope, you MUST use 'exports' - that's the standard.
I heard the "exports" keyword is prefered in the package.json. Are u aware of that and what are your thoughts on that?
Hey Matt, thank you for this video! How about automated tests as part of CI, it is possible with GH actions?
Yep, just add a test script and run it, like lint
@@mattpocockuk Thanks! I am trying to convert a lib of mine from JS to TS and tests are a really important step for me, so I'd like to setup it in CI.
Nice video, how you can group files index.js and index.d.ts in file explorer?
Does it automatically in VSCode I think
I would love to see an updated video for releasing a npm package. Specificaly, where you also walkthrough how to configure the github actions and getting it completely released. You said nothing about it in this video. There are also a few mistakes in this video, e.g. you never added the release script. Love your videos in general, but would love a better video about this topic
I usually use tsc noEmit and then bundle with esbuild. What's tsup and should I be using it instead of esbuild?
It's a wrapper around esbuild with some quality-of-life improvements for building libraries.
Matt, do you still use this method? or do you use another packager now? using vite etc
Yep, happy with this still!
Is it possile to configure tsup to not put all my code into a single "index.js" file in dist folder? I'd rather keep it in the file structure i have but in JS
Does this help?
tsup.egoist.dev/#code-splitting
Also, I wouldn't advise this - it means that unintended entrypoints of your package are exposed to the user. Use the entrypoints configuration if you want that.
Would a node esm project know to import the `.mjs` files though? What happens when you import other source modules? How does node/the browser (wherever the package is consumed) know which file extension to use? Will the final package only work in bundled environments?
Yep, that's what "module" is for.
@@mattpocockuk "module" is not a real field in node. I'm not sure which question you're answering.
You need to use the files or export field. Or since your using pnpm publishConfig override
Why is your package.json have a dropdown containing pnpm lockfile? Is that a VSCode extension? What else does that "bundle" with?
This is built-in VS Code function called ‘File nesting’, you can find it in settings. It also can be configured to pack other files like that.
Have you tried unbuild instead of tsup?