Using Node Dependencies

[00:00:00]
>> Okay, what about route parameters though? Query strings are simple enough, but if we wanted to parse route parameters, such as like instead of what if we wanted to do name/Burke right? And we wanted to pull Burke off of the name, route. This is how restful routes are usually defined where you have products, and then one, right?

[00:00:22]
And it returns the product with an ID of one. We're just gonna return the name, Burke. So, how do we pull that off of there? Now, that is something that we cannot do, there's no API that exists to do that. So, this is a point where as a node developer, you start to think about your situation and look around and say, well, I could use some complicated regex to do this.

[00:00:46]
You could Google this and look it up on Stack Overflow. How do I do this? But a lot of times, instead of doing any of that, we just turned to NPM. And we just look for an NPM module that will help us with route params. So let's go to NPM and see, right?

[00:01:05]
We might come over here and just be like, I need something that parses routes, like a route parser. Is there a route parser? Look, there is a route parser. This one right here. In fact there's a lot of them. But this one says an isomorphic, bullet proof, ninja ready route parsing matching reversing library.

[00:01:24]
And if we look at it, this is what I usually do to see whether or not a package is legit, I'm like, 45,000 downloads in a week, looks good, NPM install. So obviously a lot of people are using this, it's being used. And it says that it's isomorphic.

[00:01:41]
So if you're not familiar with the term isomorphic it's a really, really bad way to say that it works in both the browser and in Node. I don't know why we come up with these confusing terms, but we do. And so if it works in the browser, then it will probably work in Deno, most likely, most likely.

[00:02:00]
So we can use this. But how do we use an NPM package that we can't install? Well, there's a couple of different ways that we can do this. There are some services out there that allow you to directly access modules on NPM without installing them. One of them is called unpackage.

[00:02:29]
I don't know if that's how you say that, if it's UNPKG or unpackage, I say unpackage. But basically you can point it at a file that's on NPM. So for instance let me find one, like this one here, this is react. And then it return to you the actual file back.

[00:02:48]
The problem here though, is that Deno needs specific ECMA script module syntax in order to use these modules, okay. And we already talked about the fact that node didn't have that module system, for a lot of time, it's been using the the common js Module spec, which is that module.exports if you're familiar with that.

[00:03:14]
And so, the problem is that we can't use our this library unless it follows the right Import Export syntax. And we could look to see whether or not that's true by going over to their GitHub repo. And then let's look at, I mean, let's just go to their lib folder here.

[00:03:39]
And this route file is what we're gonna need. And if we scroll down to the bottom. Okay, so, this right here is a problem. This is that common js module syntax, I believe it's called, which means it's not gonna work with Deno. But most node modules use this.

[00:04:00]
So does this mean that we can't use this with Deno? No, actually, believe it or not, someone built a service to fix this for us on the fly. So there's another service called jspm.dev, I believe, jspm.org, here it is, jspm. So what jspm does is it is a module CDN allowing any package from NPM to be directly loaded in the browser, and other js environments as a fully optimized native JavaScript module.

[00:04:34]
In other words, it converts it so that we can use that it has that proper Import Export syntax that complies with the ECMA Script specification. So, how do we bring it in? We just have to use jspm to grab it. So what we can do here, is add it here, so I'm gonna bring it in.

[00:04:55]
So you can see here I'm pulling from jspm dev.jsmp.io route parser, and then the version here. And you'll notice here that, I'm gonna do this, that Deno does not care that this is not a Deno module, that it's not a TypeScript module, that it didn't come from Deno land, it does not care.

[00:05:15]
It is more than happy to fetch this file and try to run it. So let's do that. Let's just fetch it. So it's gonna pull it down. Okay, so, now we've got it, so we've got it, but how exactly do we use it? The way that the docs for route parser are, so let's go back to their docs here.

[00:05:37]
[SOUND] route parser, is it any good? Yes, perfect, I love it. So it wants us to do this, route equals require route parser. Well, we've already got it in, and then var route equals new route, okay? So let's try that. So we say const route = new route.

[00:05:56]
New route, we call it routeParser, like this, and we don't get any IntelliSense. And this is because Deno needs TypeScript definitions for this file in order to know what to do here, it doesn't know anything about this. There's no TypeScript definitions. So we just need to bring in the TypeScript definitions for routeParser.

[00:06:18]
So where do we get those? Well, let's go back to npmjs.com. And let's look for route parser is what was called, route parser. And then let's look for types. Route parser types. And certainly enough, look, right here. So there is a project called definitely typed, where people contribute TypeScript definitions for popular JavaScript libraries and route parser happens to be one of those.

[00:06:50]
So here we just need to install the type definitions. Well, how do we do that? Well, fortunately, we can use this unpackage service to bring in this types package into our file here. So I'm just gonna copy this down here cuz it's exactly the right syntax that we need, but basically what we need here, if we go back, if we go to the repo, what we need is we need to pull in.

[00:07:19]
Let's see, where's route parser? I think it's under types. Let's go to route parser. There's a lot of folders in here. I don't know if GitHub can even load them all. No, it can't. We won't even try. Anyway, there's a folder called route parser. And in there is an index.d.ts file that we need.

[00:07:42]
And we're gonna use that unpackage service to bring that in. So it's importing it drectly from NPM here. And again, we just fetch this. We're gonna fetch it. And if you remember it's sticking it in that cache, right? So if we were to go in the cache, we'll find these dependencies there.

[00:08:03]
And now, we just need to tell this routeParser, that it is of type routeParser. How do we do that? Well, there's a way that we can do that explicitly. Where we can just tell it Route is a routeParser as typeof RouteParser. So const Route = routeParser, which is this first one we've imported as typeof RouteParser, which are the TypeScript definitions.

[00:08:36]
Okay, and now that we've got that, we should be able to say const route = new Route. And look at that, now we get typescript definitions, we've got the IntelliSense, Deno is gonna be okay with us using this module. So let's, just to make sure I have the syntax right here, let's check with the guide, create a new route, that's right.

[00:09:00]
So let's define, let's go ahead and get rid of this noise here. Let's grab this. Let's pull it down. Let's pull it down, down, down, down here. And what we wanna do is define a new route and we wanna say /name, /:name like this. And really we could use /name/:name I think is what we did before, but we're just gonna look right on the route.

[00:09:27]
So if we pass in a name like this. Okay, and what this is doing is saying, there's a name parameter Route that's gonna come in, we wanna pull the name off. And so what we wanna do here is just say const match = route.match. And then our req.URL should do it.

[00:09:52]
And then here we don't need these query string params anymore because we're not looking at the query string. And we should be able to do, let's get rid of this too. What we should be able to do here is just say match.name. Is this working match.name. You know what we need to do, All the TypeScript people just cringed when I did that.

[00:10:19]
But we don't have a type for match. So we need to say that it's type any, sort of allow us to do this right here, reference this name. Okay, so, all of that. We're still running. Our watch is chugging along nicely. Let's head up here and see. If we put this in.

[00:10:42]
Hello burke. It's working. There we go, right?. So now we're successfully parsing routes. Now, I know that seems like a lot of hoops to jump through, but the whole point in that exercise was for you to see that it is technically possible for you to use node packages, NPM packages with Deno, you can do it.

[00:11:05]
It's just that you have to jump through a few hoops. Number one, because likely it doesn't have the right Import Export syntax. And also likely because you're gonna need the TypeScript definitions and then you're gonna have to tell Deno that something is of a particular type. So, a bit hacky, I think we could say, we can generally agree.

[00:11:27]
But technically, this does work.