Using JavaScript to Write a Custom CLI

I ran across this project the other day by Nate Moore and I wanted to play with it so I figured I would do kind of a first look video I don't think there's much documentation so we're just kind of gonna see what's on GitHub and go from there so it looks like you've got two things you've got the core which is unstyled components that you can basically use to build out your own custom cli's or there's actually styled props at least that's what it looks like so these style prompts are the things that you I think that you see down here so let's go ahead and click GitHub and look at this link and like I said I don't think there's a lot as far as documentation the last time I checked this out okay so let's go underneath packages then and yeah so core and prompts let's just look at the prompts I'm not sure I want to build out something live the first time I've looked at this um try the demo I'm guessing this takes you yeah it looks like to a stack blitz so all right so intro after function send a message to begin our end a prompt cancellation is how you cancel a prompt so if somebody hits Ctrl C then uh it'll show them this Cancel message another then there's a bunch of components so there's text there is confirm which is like a Boolean I'm guessing uh yep bullying a true and false there's a select there's a multi-select there's a spinner while you're thinking about stuff and then some utility so grouping elements is a great way to keep stuff organized it's a Json object with a name that can be used to reference the group later okay so it looks like we've got a group here um you've got name age color so you can reference each of these as properties later on if you want to it also looks like you can pass results okay so that's enough to kind of understand how this works so why don't we go ahead and install this [Music] all right so I've got a totally open director here let's do npm and knit and we'll do Dash y and then npm I and let's just paste in that clock prompts all right so I'm guessing that's all I have to do let me jump back over this way and see if they've got any examples I think I saw something like that yeah over this way so let's go share basics all right um so I'm guessing I've done everything correctly let's grab all this uh come over and create an index.js file and then let's paste in all the code we just got and I'll come down here and just do node index.js okay so I'm importing so let's go ahead and come over here and we'll just add up here type is module okay back over here let's try it again all right look at that so where should I start it uh let's sure let's do something all right uh Pat provide a password that's cool you've got actually Primitives for passwords typescript sure uh let's do GitHub action install dependencies so you can even Arrow left and right that's pretty cool so I I'm guessing that Nate built this he's one of the maintainers or the kind of the core team behind Astro so I'm guessing he built this for them because this looks a lot like Astros uh so that's pretty cool and obviously didn't install anything this is just for kicks uh so let's kind of play around with this and maybe let's create a copy we'll call this like uh sample.js and let's split this next to it I'll close this down and now let's actually adjust things here and we'll kind of see the difference between the two so I'll come over this way and we'll do the same thing except here we'll go node sample.js and it should give us the same thing let's cancel out of it because I'm pretty sure it's got that cancellation message that we saw earlier okay so let me go ahead and close that down just so we can see what's going on here and adjust some of this it looks like there was that intro function I'm guessing there's the outro function that we saw somewhere okay so down here so these two things allow you to basically start and end the prompt and then in between you can group things and this is one of the ways we saw to organize stuff and each of these essentially properties on the object that you pass in here this Json object you can reference later on so I've got path password type and I think you can name these whatever you want yeah tools it looks like you can name these whatever you want and I'm guessing uh oh yeah so here we go so like project.install I think we this was called project up tap here so project.install would be right here so it basically saying hey if this is true then go ahead and show a spinner wait a certain amount of time uh give a message and then give an ending message so that's pretty cool um all right so let's go ahead and adjust this and let's maybe say like name here and I'm guessing since this is all typed it's going to be pretty easy just to hit control and spacebar and figure out stuff so let's see we've got a message default value so we could say like what is your name all right and then what else do we have default value we could give maybe not a default but isn't there like a yeah initial value code I want placeholder so I could say like uh Joe beans right here or something okay so next what else do we have initial value validate so this is an interesting Tech options validate oh okay so let's look down here so it looks like if you validate a value you can basically run some kind of check on whatever value they've provided enter password Okay cool so let's do that so let's say um validate and then we'll pass this function where we give it a string and here we'll just say if a value or have no value how about that I'll return so yeah we can just basically copy this now that I look down here I think that's basically what we're doing here except we'll say please enter a name and then maybe we make it two at least two characters name should have at least two characters okay now I think there's a way isn't there a way to pass things between different things in a group even I think we saw that earlier yeah with this results so it looks like you can get this as the next you know it's like it's passing it along the chain here so maybe we say like age and see p dot password okay so I think it's just where's this P coming from okay so this is the prompts all right so prompts Dot and then password is the type so let's come in here and let's get rid of this and we'll go P dot is there like a number no so I think we'll just have to use text and validate it after the fact yeah that'll work so right inside here we'll do comma and also message I'm guessing is what I've got so it's the same things here uh how old are you and then uh we'll do a placeholder as well this one will be like I don't know 19 18 something uh need a comma here and then let's validate this as well so I'm guessing we can take in this value which is a string and I guess here we could do the same check so we could say if there's no value then return please enter your age we could also do some kind of validation on what type it is so I would think we could do something like number value and then we could check if this is not a number so if it doesn't actually produce something so if it's like Nan if we're not a number then we could return like please enter a number something like that I think that would work all right so let's go ahead and run this and just see what we got so far so we're going to run this again what is your name oh cool uh Joe beans sure provide a password oh why is the same password name oh I never saved it okay let's try again uh node all right so there you go what is your name we'll say jobin's sure how old are you let's just hit enter and see what happens please enter your age let's do a like a number value like this or a letter value please enter a number okay that's cool so I could say like 1.2 is that gonna work okay it does work with a decimal so we might have to figure that out if we really wanted to change that but now we can cancel that operation so what we can do is basically pass these things in though we never actually use this so maybe we go um like do a little wave emoji how about this and then here I'm guessing and then here I'm guessing we can just do a template literal string and then I'll get results Dot and oh look at this so I can grab any of these obviously I'm guessing you have to do these after they're initialized otherwise how is it going to know the value so let's grab uh name and let's try this one more time and come back up here we'll do the same thing uh we'll say Joe Hey Joe how old are you hey that's pretty cool now maybe I'll put a exclamation point there all right so that's pretty neat how you can pass those things along I'm guessing now you pick individual paths what if we make this like a Choose Your Own Adventure like Adventure all right and we give like results that path what's this dot path coming from oh you know what I think that may have been the very first thing wherever that was yeah over here okay which should we place okay so yeah it's actually just doing the same thing we just did which is using these results so let's keep these results so we can reference the age and reference the name so we'll say pick a project path how about here we say like uh which Adventure would you like um initial value okay so you're passing options here as an object and this is a different type than the text which is the only thing we've worked with so far so what else do we have available to us here um maybe that was it let's come down here anything else yeah it looks like just those three options for uh the select okay so then let's go ahead and change these out we'll say like uh easy medium uh or hard and maybe here we say like let's pick like a baby emoji and then over here let's pick like a child emoji that will work and then over here is there like a Bruce Lee Emoji or something we definitely we definitely need this um let's do like karate all right all right heart there we go oh no all right so let's try that again [Music] um and here let's maybe grab the results dot Joe oh I mean dot name because it could be anything and use the name once again okay so we'll say Joe and then we'll say 18. okay here we go so I actually need some kind of labels here so you can see what this means okay so let's cancel this out and let's just add in here then easy um medium and hard Okay so we've got three different values that should show let's see I also need to change this let's say easy should be the default so this is the initial value and they can just immediately press enter and keep going if they want now I'm guessing can I validate yeah I can validate so why don't we just do like a check is there a way to do a check I would think there has to be so let's grab this and can I confirm off of this check let's try that so we'll say uh if value yeah if it equals hard then is there just like a message I can show or something what if I do a pdot confirm can I do this inside of here I guess that's the question it doesn't like it so I'm guessing no okay so um maybe initial value falls on cancel so I'm wondering if there's no way to like say like are you sure let's come back over this way and see if we've got any thing in the actual package here so look at prompts come down this way cancellation components we got text confirm select multi-select spinner utilities is group and I think that's it okay so on cancel callback what we call the user cancels one of the prompts in the group okay so any of them get canceled it jumps to this on cancel which you've already seen that spinner is another option just for thinking about it I don't think there's any kind of validate where you can check you could basically just make them type it in again or not so I guess what we could do let's do this so let's come back over here and right here we could say like if value is hard let's just go ahead and return right away out of this return year two and then maybe let's do a check inside here so we'll grab the value or what was that thing called results results dot age if it's over um let's go like 25 then we could return old otherwise we could say uh Young for the hard level so it just doesn't let you choose hard at all all right let's just let's try this again uh let's go node sample uh Joe how old are you let's do 18 let's try to choose hard oh no so let's come back over this way and see if I'm missing something where they validate off of an option so maybe you can't validate off of those because I'm giving it to them already so since they're options maybe you cannot validate huh let's actually check I thought we were getting this as a complete option no I'm not okay so maybe you can't validate off selects okay well that's good to know then what I could do is come in here and have let's just do a note instead so I'm going to save this text right here so you're too old for this and maybe just make this a note instead all right and then we're going to call this good so tools multi-select means you can choose multiples I think that's pretty much the same install is just a confirmation message um are you sure Maybe here's where we do it all right so let's do that we'll say you're too old for the hard level are you sure all right so don't be a quitter all right that way if they quit out of this thing they get that aggressive message here we could say like initializing and then here let's go ahead and grab the project Dot Adventure so this will be hard easy medium whatever um level and then let's do the same thing down here and put this in Temple literal strings initializing we could say like uh time to start the whatever level all right and then uh next steps let's go ahead and change this to like uh get a walking stick all right how about that and we'll do project.name and then it looks like we just have a new line break here and then this is just to check off this project install oh okay that's kind of cool so inside here let's go ahead and say like let's grab all this I guess we'd say like something aggressive like get get your butt moving all right how about that uh note next steps okay so it's gonna actually grab this template literal drop it in here and this will be the title for the note I'm guessing so how this works so message title yeah okay cool all right so I think we got that set let's see if it actually works so I'm going to come in here let's go and run this sample.js what's your name Joe how old are you 18 let's choose hard oh no it died on us uh results are not defined okay let's come back up this way all right so we got results okay we need to just pass these results in here all right so now it's going to basically chain this and give me results which gives me access to the adventure the age and the name and I think that should now work and then it looks like there's a an actual delay here let's get rid of that so we don't have to wait as long all right so back over this way let's go ahead and rerun this uh Joe 18 let's choose hard Oh no you're too young for the hard level are you sure yes I'm sure all right initializing hard level all this is dynamic and custom it looks like we got the spinner get at walking stick Joe get your butt moving okay so aside from spelling I think we did okay get a walking stick all right there we go so hopefully that was entertaining for you uh that was kind of cool to work with looks like we've got colors that come included in this by default as well uh and it looks like we just have a bunch of different colors here cool I'm guessing this comes from some kind of Library yeah Pico colors hey well that was cool um I don't know where I would use this in real life but I mean I want to somewhere so if you have any ideas let me know uh if you are somebody who needs something like this in your CLI then this would be a great tool to reach for it looks like it's pretty basic right now but I love how the styling is just built in by default even get these nice little borders around the outro and I'm guessing the intro to you has this little line right here so I really really like that so cool hey we'll hope you really enjoyed that a huge thanks to Nate for this Library I don't know Nate personally but I feel like every time he touches anything I'm interested because he just does some really cool stuff well I'll catch you in the next one thanks for watching happy coding

Channel: Coding in Public

Views: 6,592

Keywords:

Id: JUaUJ4Vzt5s

Length: 17min 15sec (1035 seconds)

Published: Tue May 23 2023