1. Introducing JSR and its Features
Today, I will be introducing JSR once again. It's a new JavaScript registry, similar to npm, but it supports TypeScript out of the box. We created JSR due to the complexity of npm. Npm is not innovating at all. We have additional features like GitHub Action integration, provenance attestations, and documentation generation. Let's take a look at JSR itself, a simple website with package search, documentation, and a gamified score. Let's publish a package.
Today, I will be introducing JSR once again. I'm Leo, I work at Deano, I work on JSR, documentation generation and web APIs.
What is JSR? It's a new JavaScript registry, similar to npm, but it supports TypeScript out of the box. No setting up TSC, you upload TypeScript and it generates the files for you. It does not replace npm, however. It's built on top of it. You can still use npm packages alongside it. It's compatible across different run times, be it Node, Deano, Cloudflare workers, as long as they support Node modules, it works. Same goes for package managers, npm, pm, pm, yarn, and more. As long as you support Node modules, it will just work.
So why did we create JSR? It's due to the complexity of npm. As said, TypeScript is getting complicated, but everyone uses TypeScript nowadays, so why does not npm embrace it? The solution was, let's create an alternative built on top of it. Npm is not innovating at all. No TypeScript support, made very little changes, and seems more going for an enterprise route, but nothing for the open-source ecosystem. Our values are that JavaScript is one that progresses rapidly, and, again, npm doesn't really. The reason we created this is because npm is not advancing.
Some additional features of npm is that we have GitHub Action integration directly, so via YDC tokens, you can run npm JSR publish and it will just publish. You don't need to put any tokens, it just authenticates that it is actually you. We have provenance attestations which, if using GitHub Actions, it will generate provenance for you which further proves that you published the package and that you are the real author and not that there is some man in the middle of some sort of stolen tokens, et cetera. Documentation generation is that JSR generates documentation for all your APIs directly for you. You don't need to set up TS docs or some other documentation generation tool. It does it straight for you.
So, demo time. This is going to be interesting. Let's take a look at JSR itself. It's a simple website. We can look for a package, make it bigger, and it's a popular middleware package similar to express from the npm ecosystem. It has a readme, I can click over to the docs, it has some exported types, classes, interfaces, et cetera, and some more documentation, the type parameters, properties, methods, all different information that one would need from a package is included. We also have a neat little score because people love to gamify things. Let's publish a package, shall we? So we're here, an empty directory, nothing fancy to see, and we will just create, actually, let's go to the browser, let me sign in quickly.
2. Publishing a New Package in JSR
Let's publish a new package in JSR. Create a JSR.json file with package details and exports. Export a function that prints a welcome message. Use MPX JSR publish to publish the package. Approve authorization in the browser. The package is published, but no documentation is found. The hello function can be found in the actual docs.
And let's go to the main page, and let's publish a new package. So I'm going to select my own scope, or you can create a new one if you want, but I already have mine. And let's just create JS nation, and it's available. Great. So, how to publish? We will just copy this JSR.json, or you can also manually specify the file you want, the config file, but for now, we just create JSR.json, and that contains the name of the package, including the scope, because in JSR everything is scoped, we have the version and the exports. For this example, let's just call this index.ts. This could be an object, key by value, and the key that you want to map to, and let's create a TypeScript file, index, and let's export a function. Hello. Why not? And it takes a year. That's a number. And we just console.log hello JS nation, and let's pass that year. Let's add some documentation as well. So we have the actual function body that is generates a welcome message. Let's say prints. Prints a welcome message, and a year, the year to welcome for. All right, then.
Let's just MPX JSR publish, and let's hope that it works. First has to download the JSR itself, and it opens up the browser to approve the authorisation because there are no tokens passed with the CLI itself. And we approve. It does some magic behind the scenes. And it published. Now it says no documentation found because we didn't add a readme of any sort, but if I go to the actual docs, and go to the hello function on the default export, we have prints a welcome message with the year, specifying the type, and the comment we left earlier, and it returns nothing, obviously. Yes, that's pretty much it.
Thank you very much.
React Advanced Conference 2021
Comments