 Hello, hello, hello, hello Welcome to another day some more work. Oh, I think my daughter's trying to get in. All right. All right. All right. I'm back Yeah, so So today another day where we're gonna talk about Lerna things I thought today I would go ahead and start working in the Hey, how's it going Adam? Oh Oh, nice. Yeah, the the most recent one about Gatsby with Jason It's um, it's it's good. I had a really fun time time chatting with him So yeah, so today I just wanted to kind of start on the dependency track. So yesterday in The video I made I basically I had a npm org So I'm in a new project. I set it up with with Lerna I used Lerna so I used Lerna in it to set it up. We use the independent versioning option and then we used We used Lerna create to create our first package which is in packages Avatar and so it has its own it has all of this is just the boilerplate structure that it gives and Yeah, and so we did that and we published it Kind of as it stood to npm just to prove that we could publish it Let's see, what was that? Avatar So everything got published to npm. We even included a CSS file in the second alpha So that's all the stuff that we did yesterday all caught up there Today what I want to do is there absolutely no dependencies of this project yet? So there are no dependencies in this project yet. Um, so Sorry a little bit of a cough So what I'd like to do is I know that Lerna you're supposed to be able to include all of your shared Your shared dependencies in this root project Now there's a couple things that I was thinking we would try to do definitely I need react and react Maybe not react down. I need react. Maybe react down if I start doing some like documentation or whatnot But And I'd like ideally to set up some kind of testing framework. I was thinking about Well, I haven't really used it more than just a simple test I was thinking about Cyprus because I really want to use real browsers to test these to test these things Because they are visual things. So sometimes the implementation between, you know, actual browsers changes but then also Implementation between like a node environment and a browser would definitely Have the potential to be different. So That is That's it. So I think I might try to do that but set up a test for that But definitely just kind of like get those dependencies in oh the other thing is What's it called Micro bundle I really like using micro bundle for Packaging up my components so I might use that as the shared solution for For doing that so packaging is packaging these up for different environments. I might use that. I think it's really good So, yeah, so let's start So we are in our project And we have packages. Okay, cool. So what we need to do is at the root of our Our thingy Okay, so we're at the root. I want to npm install React that is something that we are absolutely going to need. So let's do that And then see how this all shakes out Okay, no vulnerabilities our package JSON changed excellent. So it's added as a Dependency Now I think I want this as a peer dependency if I'm thinking about this, right? So let's try that. I don't remember what the flag is for that actually. Let's let's start over npm install. I'm sure there's a flag Save prods have devs save optional No save Huh Interesting. Okay. Oh, yeah, micro bundle is sorry in response to Adam and chat. Yeah, micro bundle is awesome I really love it. It has support for TypeScript too. I'm the only thing that it doesn't support out of the box is the Maybe it does now but in the last time I installed it fresh it doesn't support the Spread operator, I think Or the maybe the rest opera or the rest rest parameters It doesn't support that which is a bummer because I use that in functional Components all the time. I mean, I guess a way that you could get her There's not really a good way to get around it either without having to import something like a low-dash function that does that for you It can be prohibitively difficult to actually I'm not successfully just written it on my own so That's the one caveat with that I've had to kind of do jump through some hoops to process things through Babel as well I Think I have an example of what I'm doing for react SVG spinner. I think that kind of demonstrates some of the hoops that I have to do to run it to process it through Babel first and then go to micro bundle. So if you're you're looking at that We might explore that here today, too If we end up with enough time, but probably not so here dependencies I Think I'm going to I think that's gonna be good Now I know that there's some kind of like nonsense that you can do with like 15 or 16 right now I don't really care. I can kind of spread that out or I expand that later if I when we need that to happen So let's see Yeah, as far as the other syntax though Adam it has really great support for all the rest of the syntax I don't know why that one's a special case. I don't I am yeah Just does not seem to be Supporting it. Okay, so cool. So we have react here I'm not exactly sure how to Test this I apologize today is gonna be a lot more exploration Because these are given that it's like kind of actual work. I don't really know Exactly where I'm going Okay, so what do we have here, so let's go into our package Have as far Okay, so we don't have any build script or anything like that I think maybe a good way for me to be able to see that all of the stuff is working is to actually have an environment Where I'm able to build out these build these things so so let's install micro bundle to Right. Oh my gosh micro bundle and that one is Let's go to GitHub You can learn and we can learn to do the two primary commands and learn our learner bootstrap and learn a publish bootstrap We'll link dependencies in the repo together Publish will help publish any updated packages Okay, well, let's get to know for later when we need to link packages together Okay, so the package config and learn a dot json as a list of globs that match directory Okay, we got that part I'm not recognizes leaf packages versus root package json Which is intended to manage the dev dependencies and scripts for the entire repo. Correct now scripts That's something that I missed yesterday. So the scripts for the entire repo Come dev dependencies Can be pulled into the root of learner repo. This has a few benefits. I'll pack it. Okay, cool. So we read that yesterday Okay, so okay, so I'm curious about a couple things now. Okay, so we have micro bundle now So let's go into Avatar so I'm kind of Kind of waffling around a little bit Let's add let's just set up avatar and we can pull that out later if we need to so Let's get to the micro bundle instructions. We've got that So we have micro bundle installed Perfect Let's grab these two scripts Put those in here. So build is gonna call micro bundle dev is gonna call micro bundle dot watch No, we do not have those packages installed here. So I'm curious to see what happens So we'll navigate into avatar. I always do that packages avatar MPM run build This is script because I didn't save Okay, I'm in avatar Directories, oh my gosh, what a dumb dumb Okay, build micro bundle failed What do I say in PM run build? Okay, okay, so let me do this so Running it in my route as a learner run command ran it in the one package But I can't run it directly Which makes sense. I don't know if if I am intended to be able to run it directly It seems weird that I would be if I did if I don't have that installed in the known modules in this directory I don't know where it would find it but also learners doing a lot of magic So maybe that is an expectation. I just can't figure out how to use it but For now, we'll just assume that like tests you're supposed to run any of these scripts and in the at the root Okay, cool, so we got that now we just need to set it up, right it is not set up correctly at the moment so We need to add a couple extra options. Where is this? Oh, yeah, so we'll add this config What was that? Oh, yeah, so these are just all these are all properties. So let me go back up to Main where I have main defined here Some main is going to be at least at the moment lib. I might need to actually Re-orchestrate these things so just foo.js Okay, so all these are going to be avatar Source file. Let's make this Let's put it in a directory now. I might not have it in a directory later this is source new file avatar.js Looks like this whole episode this whole live stream might just end up being about A micro bundle which isn't actually a problem micro bundle is awesome. So Let's copy our implementation Which is nothing from here So we have source so the source is going to be source avatar.js cool We've created that now the module Let's throw all these in lib since that is how our project is already set up The main is also going to be Lib All right, I think that's good. So if we run this again, we should actually see some output this time Yes, and we do. Okay, so we get the What avatar.js Is our source? Sorry, that's a new file that I created. We're gonna get the UMD UMD map Mjs Mjs map and JS and in our package JSON We've already set up these so that the appropriate bundlers know how to find Find each of those files This is all this is all good so far. I'm glad that this is working now Something that I almost always do and again like I said before I'm going to set up this one project And then we will pull things out as they get globalized. So like once we have two we'll know what we actually need to pull out but typically in a project like this I would set a git ignore And give it whatever my like Distribute distributed directory is so in this case that would be Lib And I can never remember if I need to put a slash on that or not So yeah, so that's something that I end up doing and then also there is a There's a way to At a npm ignore And in that case you do not live you just do the opposite of where we're doing because I want these to get distributed I want those to I want the these only to be sent to npm. I don't want them on github So this is how that should work Let's see It didn't I think I need to do oh I did work. I'm so bad at gloves Okay, cool. I think that worked. So now now that we have that so get and my micro bundle for avatar Okay So we got micro bundles set up Let's actually so now that we have that set up I can start to kind of see I can I can try to import react and see if it builds the way that I expect So source Oh, I can also so there's that. Let's see in npm run dev command Sorry, learn a run dev will run it for all of my projects Okay, so So function avatar return Image, okay, so I'm just gonna put these in here for it again because of that spread props problem or Rest rest properties. I can never remember the name of these syntaxes Okay, so Dev it looks like it's doing but it looks like maybe lerna is swallowing up the messaging so I'm gonna run Okay, cool It looked like everything linked properly. Let's check in lib Cool awesome, so it is it's going to pull in these it's it's linking react It's transforming the import and export statements, and I'm getting all of these versions out amazing Now you'll notice that it defaults to H. Now. This is for hyper. Was it hyper? something hypertext Anyway, the the the pragma that it uses so this is designed. I think primarily with Preact in mind But there is an escape hatch so it uses that H for like hypertext But we can get out of it with the JSX option So we'll put that as a flag on both of our commands Where's that in the package JSON so build and Okay, cool. Let's check it out again and Yes, so it changed from H to this reference, which is the imported module so awesome So all of that seems to be working all the linking worked So it knows how to find react which is awesome So it's set it using the environment obviously so if it's in production versus development that is all great so let's Okay, let's do this so Lib so we changed. Oh, yeah, I need to remove package Avatar packages avatar lib avatar.js Yes, because the only one that I want to track in yet is the source file Let's see if there are any others that made it through that I should remove all I'm in here Packages avatar lib Okay, so I need to kill The whole lib directory in yet. Okay, so that should be gone See you set up sort of preact React and remove Okay, so this directory is still here though. Maybe I didn't do it right because avatar CSS is still getting tracked Um, okay, let's keep pressing on you ask for will work. This is Absolutely how my actual day goes just Just stumbling. There we go. Okay. Okay. We'll amend the last commit And push that up. I'll force push. Okay, so That directory should no longer be tracked in Git Cool. No longer tracked. Excellent. This is what I wanted now. I can learn a run build build Learn build Learn a rub build. Oh my word Now that should rebuild the lib directory which it did we see it here But in git we should no longer see it wanting to track anything. So this is exactly what we want Now I can publish this Now this component kind of sucks. So maybe I should actually make it better I'm curious if Let's try Using the syntax that we want and see if it fails fingers crossed Whoa So maybe it's So I wonder if it doesn't support spread. Maybe it's all fixed But also maybe it doesn't support the spread operator not in not the gsx spread I don't know. Well, this is perfect. This is all I care about. So if that worked Um, let me see. Let me try to pull off other properties So one of the things I know that I'm going to be doing is I'm pulling off class name And I'm munging some values into that so class name It's going to be So it's going to be an array of values That I'll call dot join on with a string in between If I can get there, um Aperture and then I'm going to add the rest of the class names in So we got that so Man, if that works, that's awesome. That's so much less things that I have to do Boom amazing crazy. Okay, cool. So it's doing it too. I Am loving it It does use object as sign. So I need to be kind of careful of that in Wait, let's see if the The umd bundle does It also uses object as sign. So Let's see what support for that like Um, yeah, I don't know. I wonder if polyfills would catch that or babel polyfills I'm not sure. So that's that's an area of exploration So, um in my read me, I'm going to add this No, uh, this is one area where mono repos can be really irritating is Um trying to find stuff Okay, so uh, let's see object as sign object dot sign is used in builds Do I need to Do I need to polyfill that? Or will the bundler So that's a remaining question that I have And there's the only way that I'll be able to Kind of determine that is through exploration I'm actually installing it in one of our app environments and running it through uh internet explorer Okay, cool. So This um, this does what I need it to do. Um, we have Oh, so the only thing Is I deleted our css file. Um, so I guess I guess I'll put that in source um And like I said in in in the beginning it's possible that I won't have these in a directory at all that these would just be in the root of the avatar project And the reason that I would do that is because when someone needs to grab one of these pieces, um individually Like the css file if they want to link that css file I don't want them to have to know a deep path to get there I just want them to be able to do npm project slash the resource um I'm gonna do that now I'm gonna do it So, uh, let's change some things. Uh, so I'm gonna make avatar.css I'm gonna move this out into avatar. I'm going to delete This source directory That means that I need to go into package json for avatar And I need to change a couple of things. So instead of source My source is now avatar css and the style is avid or sorry The source is avatar.js and the style is avatar.css. So Um, I think that that should all be good now And if I did it all right, I should be having to track the deletion of the directory and the inclusion and add avatar css and js um Okay, cool. That looks good. Uh, let's see. What did I do in this commit? Um, basically added css file back to Tur Kind of made a component. Okay now When we get back to github, so I'm gonna go check github real quick. Whoops. Oh, I'm gonna check github real quick And what I want to see is no lib directory No source directory And I want to see that right in the root I didn't write any I didn't put any code in there I want to see that right in the root and um So yeah, so everything so there is looking good um Let me go unpackage.com slash. Oh, I think I saw it in my 1.0 It's cough though. Yeah, I'm just gonna grab that css perfect I'm going to add it back here I need to change my default. I do that so many times a day. Um, but I'm so lazy. I just refuse to do it Okay, so, um, we got this, uh, we've got that going. Um Let me add that back in to get After css. Boom. It's there now. Let's run run lerna publish Lerna diff. Let's just see what happened Um, so we can see all of the things that changed Uh, we can also there's also a command called lerna updated Lerna updated just tells you which packages had changes Um, so that's really nice if you don't want to actually see all the changes You just want to see which packages had changes boom Unbuild actually If we go into our package json, I think we can set up a so I was gonna say we could probably set up a pre publish hook for Um, so that we can build all these before we publish them. Um Again, I think that's something that's an optimization that I'll probably save for when we have multiple components And I can actually test it and not just kind of do the work in theory without an outcome Um, okay, cool. So now we can do lerna publish It'll ask us which version we want to publish We'll do a custom pre release. Um, it already is incrementing that that number. So yes, we want to publish boom We should sound now see that in our versions. So it's the latest perfect And if we go to unpackage again avatar like that, I will see that it is now connected to that lib version of it, which is the Let's cgs version We can inspect what actually went up to npm We have the read me package json license the lib directory You'll notice that none of the sources in there because we're only sending up our lib directory Um, now it's possible that because I'm specifically sent Um, uh stating the lib directory in package json avatar. I'm saying specifically send this up Um, I it's possible that I don't need to do this in p.m. Ignore. I don't know. It's it's a habit We could test it and see because it would be nice to have one less file in each of these project routes So I'll test that on the next one. Um, Let's see. Yeah, and so then we have all of our all our js files Now the only thing is um now our css file isn't in there. So we need to add that Um explicitly so we're including all of lib um, but we also want to Include avatar.css now I'm going to go out on a limb I'm going to delete this in p.m. Ignore because we're explicitly stating that we want these files in here so Uh, we'll see how that works Um, jigger super descriptive commit names. I'm sorry learn up Again custom pre-release That is fine. Yes All right when all that goes Up is alpha two still change that to three We have avatar css awesome Uh, lib directory is still in here amazing. Uh, so don't need that npm. Ignore great. Um Let's see. I think everything now is set up the way that we want 1040 Yeah, let's see how far we can get in the next seven minutes Actually, no, I'm not going to get very far in seven minutes I'll save this for tomorrow. So tomorrow we'll do. Uh, we'll do cypress. We'll get a cypress setup I think I ended up spending significantly more time actually specifically talking about micro bundle. Um, since we had to get that set up anyway, um, micro bundle is amazing. So, um, yeah, as you can see it took a lot of work out of the process of compiling gsx and Setting up different builds like it's a truly amazing project It's we did hardly any work to get any to get all of that stuff to work and um, it supports typescript. So Uh, if you're into typescript or flow, I guess I've never used flow. Um This thing's amazing Anyway, uh, I'm glad that we got to cover that today. Um, we kind of covered some like npm publishing stuff and, uh Yeah, so next time. So tomorrow on friday, we will definitely be doing, um, Trying to get at least one test going for using cypress, which we'll test in a browser Um, that's it. Thanks for hanging out with me. Uh, yeah, if you have any questions, hit me up on twitter. I'm chantastic And, um, that's it. Uh, hope to see you tomorrow