The NPM Library Speedrun - 90 minutes to build, CI, and publish

thank you so I think right now I'm live I just had a massive screw-up with the previous live stream that I tried to put up yeah here we go we are live we are live I can't see chat though hang on okay let me set some things up let me get my channel ready and we got two people watching now this is crazy because on the other stream we have like 140 people waiting for this so let me hey hey hey I can see you fantastic but for some reason this isn't working okay we got people here we got people here hello folks hell yes all right let me set think some things up I've got chats got police say chat is working hello from Russia yes okay I can see you guys all right everyone who's here you need to go back to the other stream link and like tell everyone to get in here because this is where it's happening I'm just going to do this right now oh my gosh you there's so many folks here this is awesome okie dokie we have where's the other live stream where's the one I put together oh my God you're telling me live stream is so painful okay life life live yeah here we go okay this is the old one so you guys can't see what's going on stream broke New Link here whoa so much so maybe oh this is epic this is epic got some folks from America from India some guys excited about TS reset yeah I'm pretty excited about it too let me just pin this put it where basically anyone can find it yeah old stream is broken new stream should be fine though stream is broken go here whoa Denmark oh my God my Christ okay cool Saudi Arabia Colombia Venezuela Sweden Argentina Austria Portugal and Spain how many of you are there in this stream this is ridiculous listen I'm so grateful that you folks have come because I don't stream very often actually and when I stream I like to make a big event and I'm so excited that you guys are all following along we are going to be publishing a npm package from beginning to end so like I don't even have a git repo set up right now I'm going to need your help I'm gonna need help writing a readme um gonna need help like writing some code contributing tests Bulgaria Indiana Brazil Africa Dresden Norway Serbia oh my Christ so many of you this is epic this is epic there must be more than 57 in here Nigeria hey Zach oh my wow this is crazy um and we're going to try and do it in 90 minutes now publishing a package to npm it's like a complicated process there's going to be a lot of steps we need to go through I'm going to be in the tank for a lot of this you guys need to be asking me questions bouncing ideas off and when the GitHub repo goes up we're gonna need to be going crazy for this yeah who's excited just so Johannes I didn't realize you were from England Germany Brazil Nigeria Epic ah thank you mugetsu I really appreciate it 96 78 people Prague the unfiltered build podcast awesome yeah I mean I've been thinking about doing podcasting like podcasting is a really cool space to get into and I I used to have my own podcast when I was an accent teacher actually funnily enough um I used to do a lot of this stuff when I was an accident teacher so are we ready let's take a look at kind of the splits here because it wouldn't be a stream like wouldn't be a proper speed run without splits I'm thinking that I'm gonna run this timer and what this time is going to do is it's basically going to like tick down to 90 minutes or up and if 90 minutes are up and we haven't done all of these steps then we're going to delete the repo all the code's going to be gone we have our first CI run that's our first step so if we can get GitHub actions working and like our CI is checking and it's time checking correctly then we're good we then need to publish 0.01 to npn and after that we need to build out the API so I'm going to publish like a 0.01 just to make sure that npm checking is all set up and then we need to get a test passing then we need to write the readme then we need to get 1.0.0 published all in 90 minutes I am uh real nervous about this because it's a lot of work I've got to entertain you guys I've got to make sure that this stream doesn't just go off the rails and I've got to convince you that I'm a good enough typescript developer that you should buy my course you know total typescript so there's a lot on the line for me so I will need your help um I think we're going to start it off in like about eight minutes but for now uh let's just do a q a yesterday I did a really interesting well actually it was on Sunday on Sunday night I thought to myself okay like there are some things that annoy me about typescript several things and what I decided to do was I decided to fix those things because you know I'm like full-time on typescript now and so if I can make kind of anything that's like if I can make touchgrip better then that benefits me as well and so what I did was I decided to release something and it's it's an nbm package actually and the nbm package is called total typescript um let me dig it out for you and you should be able to see what I'm doing here it's called total typescripts and TS reset now what this does is basically there's tons and tons of sort of like horrible things with typescript I really hate anys in my code uh like Json pass and the fact that fetch.json returns any is like really painful to me because these things should be sort of like unknown here but I decided what I can do is you can just like import this file here import this import total typescript TS reset and now jsonpass returns unknown now fetch.json returns unknown and now filter Boolean gets smarter now dot includes get smarter as well so I'm super I'm super excited to like release this and like have this in different people projects it's already got like I don't know how many stars on yeah like 1.7 K Stars yeah I think TS research is awesome project yeah hype from Twitter is not from this world yes that's true is this pre-recorded no man I'm just chatting I'm I'm I'm right here right now yeah okay General TS question don't you man oh you've already purchased my course thank you hello Alvis I really appreciate that give me questions then folks so I'm here I'm here for like six more minutes and then we gotta get into it because we got to do the 90 minute speed run we've got to power out this TS Library and then we gotta somehow wrap it up in a nice bow and then it's Pancake Day in the UK 185 185 of you are here that's crazy this is like way more than I've ever had on any of my streams before Epic how's your Irish accent these days Willow rig and what's up man how's it going will I Reagan is uh my old boss actually he is I think one of the uh best bosses I ever had he's an epic dude so everyone say hello to will Will's Epic what are my thoughts on hot script hot script if you don't know hot script is a library that came out from Gabrielle vanio who's the guy who created TS pattern and it does some really cool things it builds on top of um a pattern called higher order types and it lets you basically use functional programming to compose different types together it's extremely powerful I was thinking about doing a video on it actually to use interfaces on class Constructor arguments I have a vendor who does that and it frustrates the linter because interface doesn't match the actual class would need some typescript stuff there recommended Dev books that's interesting I didn't like I don't read a lot of Dev books do I still have yeah I've still got this check this out oh look at that oh wait you can't see let me flip uh transform uh flip horizontal there you go PHP I was a PHP developer before I was a JavaScript developer um didn't do it very long did it for about five months and then the company I was with sort of collapsed but I didn't mind PHP I sort of it was pretty similar to JavaScript in the kind of untyped it's pretty messy really let you do some really weird stuff but it was kind of fun to mess about with hang on let me transform back but yeah I was PHP developer first um so I don't know I when I came into JavaScript the whole system was moving too fast like I didn't really trust that a book on react was going to be like up to date because react was moving so quickly at the time not really sure how to buy my course my course is not out yet my course is releasing in like maybe two weeks or something we are really really getting close now um the like I did my last bit of filming for the course uh last week I didn't um we're gonna be shipping some like interviews with the course too so I've been interviewing Alex from trpc uh Colin from Zord um I interviewed the program manager for typescript Daniel rosenwasser yesterday who's a lovely lovely dude um so yeah like we're we're close now we are really really close you like my voice oh thank you looking awesome oh thank you lamp is the number one stack I don't know they're probably Stacks before that I don't know if the Cobalt stack is it what your thoughts on react or general Trend uh towards moving being like PHP that's a really good one so for those who don't know I was employed by versel last year and versel is a company that makes next.js and xjs now is sort of like all verse Ellis sort of owning more and more of the react team that's starting to employ more members of the react team 217 crazy um and I while I was there they launched server components like that was part of the deal at next 13. and I was at the conference where they announced them and I think that it's pretty cool I don't know if react server components are like the perfect paradigm I haven't really used them yet I wasn't part of the team that was sort of launched them so I didn't have uh anything like that I do have a Discord mattpok.com forward slash Discord someone put the link in the chat um yeah and so like I'm not sure yet I'm a react developer I've been react developer for longer than I've been a typescript developer so enums will be usable enums are fine I mean they're not great I don't like them I prefer as const enum's meh is it good for selt to be acquired by yourself yes it's great um it's good like the cell wants a diverse ecosystem and I I think versel have their head screwed on right yeah oh my new subscriber okay that was a quick fire around any morning more because otherwise we should probably start the speedrun we're nearly there um oh my gosh how many now how many now I can't see the number I'm not going to look at the number I want comments in package.json um uh I haven't seen that uh create reactor discussion but quick react app is is dead I never use it I never recommend it Vitas is super rare yeah Union attempts about the neenams what is the library that we're going to build okay so I have an idea for this I need to find this tweet maybe one of you can find this for me I released a library called um zodfetch and what zodfetch does is let me see if I can dig this out so here um let's look at this Zord fetch now what zodfetch does it gives you a really really small wrapper for just like integrating with Zod and it means that you can basically get type safe access to remote apis so here for instance we have a result which is a weight fetch wizard shape of the day two shape you want your data to be in and then the result is going to be typed as hello string really really useful and it got me thinking that I think we can do other stuff with Zod Zod sort of is an untapped area for sort of building out really cool complex apis um so zard map Pokemon is probably the thing branded about types oh God I talk about it so quite a lot don't I latest uh this isn't gonna go well but the basic idea I have for this would be that you'd be able to basically use Zod in like a websocket because what you can do with Zod is you can say Okay I want to validate things coming in and you can create schemas for that so I've done lots and lots of work where I've wanted like a type safe message bus and I've talked to my pal Eric Rasmussen who works on Redux form and and other stuff too react final form works on centered or worked on centered and he's talked about that as well they like type safe and runtime safe message passing between different localities and different environments is super important and really underserved so I want to build something about that can't use generics and then generate Zod validation from it instead of passing a Zod object you've got two choices you can either create the generics or infer the generics from the Zod schema so go from run time to type which is easy and safe and really nice but you can't go from type to run time you can't easily make runtime structures out of types always write usage code first yes I think we should start with that actually we should start with that um grok D is a really interesting solid implementation for scientific oh I've used sanity before total typescript uses sanity sanity is epic hello hello uh Neil before Zod I don't actually like I want to do an impression of that but I don't know the reference well enough okay we need to start don't we um it's not for me that it can generate the type type should generate the guard function instead nah zod's like more expressive than typescript can be so oh I think we might be ready to start are we ready are we ready are we ready already two to seven good Lord good Lord yep TS course is coming out as planned prices are on the website um I got my water I got my tea my voice is starting to go already it's been a lot of talking for 17 minutes so the fetch doesn't let you define the shape of the parameters just for the day's returned no but it's clever I'll show you I use my um other screenshots code I use carbon are we ready kids are we ready um okay because the moment I push this button the second I push this button I'm gonna need to start working a live split timer I because does live split work on Mac I couldn't get it working on Mac two three done it's going to be released in about two weeks the moment I push this button we're gonna need to start kicking into gear we need to start creating staff and the ammo we're gonna need to get coding and I'm lazy boy I'm a lazy boy congenitally lazy I'm not sure if I can be bothered to do this yet five for three two let's go okay so I need to first of all create um I'm going to CD into I have a thing called CD repos TS let me bump this up so you guys can see this uh LS bunch of stuff in here let's make a new directory and I'm going to call this Zod message bus for now uh we can argue about the name later I think so Zod uh message bus there we go okay we've got a code instance this is good I'm gonna like detougle my vs code settings so I actually like oh no my my like GitHub co-pilot isn't quite working as well which just sort of sucks but oh well we'll have to just carry on so inside here I can do I've got like a special CLI that I use called matte matte in it pnpm and this is going to create a bunch of stuff for me so it's going to create a package.json it's going to initialize git and uh oh God we've got so much to do okay so um inside here we have a source index.ts we have some git ignore stuff I'm going to add this to this while we're here we're going to need two what's the first thing I need to do get the first CI run good Lord okay so much to do before then um we're using pnpm because pnpm is the Go goat should we spend 60 Minutes using your name you guys can choose the name I think zodmessage boss is good I'm going to show you some usage apis once we've got our first Co see I run done I'm going to add pmpn add d t s up TS up is going to be doing the building for us and it's going to make sure that we can support CJs and esm as well so we've got TS up we're going to add a build script build is going to go TS up oh it's still working fantastic Source index.ts format CGS esn.cds that's good now we can run pnpm run build pnpm run build that should stick it in dist okay good good good good good good no copilot no I'm on it mate I've got co-pilot thank wait should I turn copilot off I don't have time we got our dist now dist these are the files that are actually going to be shipped out to the world here so what I can do is I can go index.ts I can export const hello and go like this and oh yeah we've got a GitHub repo so I should post this right so initial commits boom publish branch GitHub public Repository we have a git repo I'm going to open it on GitHub let's do it you're the co-pilot absolutely there you go so we have Zod message bus we are live we have a repo so get star in that repo and I'm gonna need some PRS in basically as soon as we can but don't derail me with those PRS don't listen don't PR nonsense don't make me review your stupid PRS if you make me review your stupid PRS we're going to lose this speedrun what time is it how long we got left how long how long how long okay wow so we can build now and we're going to get the build outputs so the build output is going to be yeah it's kind of messy for cgis but you can see that we have hello there which is good and we have hello here too nice let's cancel log hello inside here just to check that it's doing something and then we can start putting together a CI I need to go into inside my ts config and I need to check no inmates to true the reason I'm doing that is because no emits true the reason I'm doing that is so that I can basically add a lint script here lint and then not here slint Source just TSC and now when I run pnpm lint I saw the person in the comments who said I don't need to run run you're right I can now get type checking on my repos if I say console.lg inside here pmpm lint bam okay good it's giving me errors here now this is going to be important because when I release it out to the wild I don't want to have random errors sort of like messing it in so yep repository Link in YouTube chat it is uh Zod message bus Zod message bus maybe I should I don't have time okay okay so first CI run firstly I run for a CI run we need tests okay so we're going to say pmpn add dvtest v test is a banging it's such a good test Runner it's so good we're gonna need to uh run some like uh unit tests index.test.ts and v-test gives us a way to do it so we can say describe or not from node test import from v-test nice describe and will say describe whatever and we're going to say it that comes from v test as well um should pass CI oh thank you gabco pilot thank you okay cool we've got our first running test oh yeah I need to I'm going to add two scripts here I'm going to add a Dev script which is going to run v-test and then I'm going to go test which is going to go for v-test run what this does is if I run pnpm Dev now it's going to basically just run v-test on a watch mode but if I run pnpm test then it's going to basically run it and then quit out at the end which is good and if I fail that test expect one to be two then it's going to fail my ci2 how is it different to trpc how's a lot different to T on PC pmpm autocomplete I'm not getting pmpm all to complete either um probably I don't know I don't know two five nine jeez folks okay what's next GitHub uh workflows I'm gonna cheat here I'm gonna say um what's the most recent thing oh yeah let's just do TS reset I'm going to just like pan over to the TS reset um thing over here it's the repo and I'm going to look at our main Arco whereas what you did I'm gonna look at main.yaml because this is the basically this is the setup I like to use for basically GitHub actions GitHub actions are going to be RCI here so let's go for DOT GitHub and workflows and then we're going to have main.yaml copy and paste that in now it's basically going to do a few steps it's going to check out the repo it's going to set up pnpn it's going to set up node then it's going to install pmpm from a frozen lock file so install all our packages then it's going to run a script called CI so let's wait is that my phone ringing Specsavers there's bloody Specsavers CI and I'm going to make it go pmpm run um we need to run lint and test and build nice because the tests themselves they just run on the source file so they don't run on the broadcast exactly this is how you code copy an existing example I'm too lazy I'm too lazy to figure out all this yaml stuff um any more steps any more steps I don't think so so pmpm runs CI let me check that again CI that's going to run there that's good the tests are going to pass I need to make sure they pass then index.ts there's no errors there so Linda's going to pass let's run pmpm run CI and that's going to run all of our bits together this is good but we can make it run faster using turbo repo if we really wanted to but I'm not sure I do want to Let's freaking go okay I'm not sponsored by GitHub by the way I just really like GitHub actions it's super easy um CI so now what we can do is we can tab over to the repo itself where is it uh Zod message bus here it is and we can check take a look at these actions and as soon as this CI passes you can see a CI is now running which is great okay come on hosted Runner come online setting up job setting up node install Frozen lock file this is good nice fast really fast pmpm run CI TSC passed v-test run passed build passed Post Run come on what are you cleaning up right call it 8 minutes 20. 8 minutes 20. time for a glass of water come on explorers on the right yeah explorers on the right it's always on the rightful name time is still ticking but I'm just taking a moment that was intense eight minutes twenty to deploy a like get everything working get the CI stuff done that's good bus is coming wait no I don't want to get whatever the equivalent is okay next step is 0.01 published okay this means I need to go to npm I need to get some stuff working so in order to get this working on npm I'm gonna need to do a few things I'm going to need to go into the package.json here oh I'm in the wrong thing um I'm gonna need to change this Main index.js cause I need to add a dist file which is going to point to index.ts so I need this to be dist index.js then module is going to be index.njs and types is going to point here that's good pmpm is an equivalent to npm but it's much faster because it does a lot of really really smart caching pnpm is what I use and it's what I'm going to use on this speedrun because it installs things way faster if I was using npm I might not make the 90 minutes so now we're good now we need to make a release plan and this release plan oh yeah I'm gonna release this under total typescript Zod message bus I think um yeah pnpm is just faster cable mashing sounds um yeah it basically is like npm but better and yeah I'm gonna do this so that no one can scalp that package name out from under me because when I was building TS resets someone actually came along and like nabbed TS reset while I was building out which was extremely frustrating yeah it's it's so much faster it's much faster on CI it's faster it's just so much faster the reason it's fast I could explain why it's fast is because it's basically instead of installing node modules in node modules it installs them in a global cache on your system and then what it does is it hard links them down to node modules that means that whenever you install something that you have installed before it doesn't need to download anything it just pulls it from the cache it's incredibly quick yeah yeah tsub creates the d.ts files it creates the dot MJS files and it's powered by es build oh yeah yeah you're right I need to change it to oh my face there we go um 0.01 uh okay uh I need to look at npn now so on npm what I need to do is I need to create an access token so I will do that but I'm going to like obscure most of it so we need to go into access tokens and let me just check that there's nothing scary here access tokens it's on French token yeah okay I think I'm going to generate a new token and what I'm going to do with this token is I need to go into GitHub into Zod message bus and it's going to settings I need to go into actions no not actions environments no not environments no his actions I think and I'm going to um runners where is it where is it where is it secrets secrets is what I'm looking for Secrets deploy key secrets and variables okay inside actions I need to add basically a secret which is going to be npm so it's going to be no not not environment environment secrets there are no secrets from this repository new repository secret my God npm token so I need to add an npm token that I'm going to get from npn I'm going to do that right now I'm creating a new access token I'm just going to vaguely talk you through it oh my god I've got to enter my one-time password OTP uh 694. no why am I telling you this I shouldn't be telling you that karaoke need to provide a unique name for it uh uh um uh uh yeah pmpm is better than yarn for sure um for God's sake okay cool I've got my token stick it in here add the secret okay and we're good to go and what you can see now whoops yeah there we are is we've now got a repository secret which can do npm token yeah this is recorded this is recorded um 302 good Lord wait what's this you got a pull request what do you change you added love you.ts this isn't even valid typescript what are you doing no you can't approve these changes no I'm not gonna no close how dare you these are not Blu-ray glasses these are Specsavers glasses which is what our Specsavers was texting me earlier um sake it's 14 minutes in okay we need to ship okay where the hell am I going it's old message bus okay we got this bill working we need to add something called change sets so I'm going to add pmpn add change sets CLI add it as a Dev dependency haven't accidentally edit anything as a non-dev dependency no good if I added anything as a proper dependency then that would mean like it would get bundled with the application that or the library that gets sent out which is not good so we need to say change that CLI now I'm going to say pmpm change set init that's going to initialize change sets and change sets if you don't know I'm a huge fan of change sets it helps automate the workflow for publishing like beautifully so I'm going to say um we have another one inside publish.yaml now this is inside um TS reset but I'm going to copy and paste this over so we can get our publish workflow working too so we get publish dot yaml now that is there's a lot going on here so this is going to check out the repo is going to set up pnpm gonna like set up node install from pnpm and then it's going to either create a release pull request I'll show you what that means uh maybe we won't actually get to that but it's going to publish our stuff here and it's going to run pnpm run release well at least we have humor yeah um I'm not sure I do I'm too tense um so I'm gonna run release and release is going to run the same thing I think as build except it's also going to run change sets change sets publish has it changed that publish or change that release bloody docks my first time looking at docs okay this has changed sets by the way super good uh change sets publish isn't it publish why don't you publish publish publish publish publish for God's sake where's the CLI command line options in it add version publish okay it's published good shouldn't you unrestrict engines I don't think I care about engines not for this one God that's a good question though I hadn't thought about doing that anything but looking at dogs oh it's awful okay so publish we've now got a pnpm run release change set publish what this is going to do is it's going to mean that I can say pmpm change set and a change set is a kind of indication that something needs to change about the library or something that will change about the library so I'm just going to say initial commit here and initial commits what that's going to do is it's basically going to like put in a markdown file into this into this change set directory and it's basically going to say okay this is a like intent to deploy and what that means is I can like if I commit this I'll say in fact I need to do one more thing which is inside my Zod message bus thing I need to check something oh God no there's another PR there's another PR advertis config nvmrc oh this actually looks pretty useful to find config test yes yes freaking love it conversation merge thank you that was useful that added a VC config.ts if I'm not mistaken and an nvmrc epic stuff very very nice stuff um t could do that actually yeah that might be useful um so I've got this working now and I'm going to oh yeah this is what I was going to do I was going to go into settings how many views we got by the way what are we at and I'm going to do actions I think I need to take the camera off um General no runners no this is fine so I just need to do something annoying okay annoying thing done now we can go into here and we can say uh initial commit let's just say um how to change this you can see I don't have particularly good commits stuff speedrun yeah POG POG POG am I using that right I watched quite a few streams because I never stream I never know if I'm using like POG in the correct line well yeah I mean that's pretty good that's pretty good uh so what this means now is in our publish action what this is going to do is because it sees a change set in there it's going to create a new pull request that actually lets me like send something up to npn and say like it basically lets you publish your package just by pressing a button which is going to be super duper useful Chrysler extremely good stuff extremely good stuff pull requests bam we now have version packages um PR here and I can basically by merging this pull request this will send it live to npm hopefully and this means that when this goes live this basically like or when this goes up it runs a couple of actions here so it's running our CI which we know is going to pass and then it's running publish too and when this CI completes then we should have completed our second mission we should have 0.01 published and you guys will be able to use it and pull it down and that might be actually very useful so give me a second oh oh what happened what happened ah private packages oh no there's a conflict option I've missed um because I don't want to publish this as a private package I think it might be like I have to say private false or something and I think inside config change set it's not access restricted it's accessed public I think um maybe fix changes okay we'll try this again try this again try this again try this again 282 peaked at 302 yeah 282 is crazy okay we're so for those who've just joined us we are hoping that this is going to pass because if this passes then our speed run which we need to complete in 19 minutes is one step closer come on come on come on visas run foreign so we should be able to find that npm Js message bus total typescript message pass Come on load why aren't you loading replication foreign where are you total typescript total God I can't type so I've message bus search wait where's the thing where's the splits split yes come on Piper okay we're 22 minutes in we have we now have all of our infrastructure set up we now need to actually figure out what the hell IR API is going to be like that's the next step API built okay but we got it have you guys like done anything stupid do I have any pull requests to like go through added MIT license yes look at this look at this is this under the right thing am I to license lovely Matthew pocock got my full name as well I'm not Matilda pocock I'm Matthew pocock let's rock and roll so merge pull request thank you very much license split is fake version 0.02 yeah technically okay so now we actually need to figure out like what we're building because currently the only thing that we're exporting from this is a function called hello which console logs hello so bonus points if you can actually get this working inside an app they should work with like an xjs app or something you'll just be able to call hello from whatever um but firstly I didn't agree with that license have I messed something up because I thought I had a license MIT down here already no okay we're fine foreign deployment looks fine I think deployment looks fine actions yeah green lights all the way baby something special happened today I got green lights all the way with no big red sign to stop me no traffic jam delay all right ah okay so what's next we actually need to freaking like what did I I didn't sign it with my soul it was over this isn't no wait soul no soul we're good this is a standard MIT license let's get some features up in here you're right okay index.ts so what I'm going to do is add like a playground inside here playground.ts oh yeah I need to do a couple more things I need to add npm ignore and npm ignore is going to just ignore the source files you can ignore change sets gonna ignore GitHub I'm going to ignore um pmpm lock.yaml tsconfig dot Json v.comfig.ts because currently if we look at this we're actually shipping a load of code that we don't need to up to npm which is not great so oh no dist folder what the hell happened there's no dist folder ah okay um crap why wouldn't npm run build why is there notice folder oh did it ah okay cool why is there no disk folder I forgotten okay right we need to move fast I think by specifying npm ignore I'm actually going to be specifying the things that should be kept in so I'm going to say pmpn change sets and I'm going to say fixed issue where dist folder was not being sent okay design change set yes pmpm change sets I'm going to type slower so I can actually type successfully okay bam fix bam so what I think that's going to do is I think that's going to reduce my disk folder yeah um is it's going to actually now because it's going to automatically publish here because I actually like versioned it properly so it's going to see now that a new version needs to be published and then it's going to publish it this is great uh what's what's this new pull request what have you guys been doing clean all comments of TS config oh oh me likey knowing that true wait where's Nemet true that's good man this is real good thank you another one in there Chrysler Chrysler look at these contributions from Chrysler wait you're not in the country pieces list it's a stupid GitHub wait there you go where's the contributions list you should be in there okay well GitHub is being weird um cannot cope with the pure speed so I'm gonna need to check now this should be 0.03 or it should be coming soon Come On Son Come On Son 0.03 is this there is there good yeah I'm not loving this chaotic energy I usually code in a much calmer mode than this but I'm gonna have to move fast we now have a playground.ts and playground.ts is going to say this is going to be where we're sort of examining what actual API we're gonna want here this is like so far we are just like um we're just publishing an empty package to npm and I just need to really check what time it is okay we have 60 minutes now to design API to build the readme to do any other steps Test passing read me written Okay so so I think I want something like this I'm going to actually add Zod as a peer dependency and a Dev dependency because uh Zod I'm going to add it as a peer dependency too so zod's in there peer depth now peer dependency means that Zod is going to be installed with this or it's going to be recommended that it's going to be installed so ideally users would have Zod in here and I think I'm going to accept anything above three because we're not going to be using any crazy features I don't think so the playground that I want then I'm going to say import from Zod now this is going to say um we're going to want to yeah I know I I cannot believe my CI luck actually this is working on my side um I want to do something like this I want to be able to say um const Zod message bus equals or let's say message bus equals it's basically going to be a like imagine a half let's say like declare const create okay hang on hang on I've had somewhat of a chaotic energy over the past 29 minutes and five seconds now is the time for calm cause we need to start thinking about our API and if my hands are moving too fast for my brain I wouldn't be able to keep up let's get this bus on the move ah so declare can't create message bus we're gonna just say this is any for now and this will let us just sort of mess about with this so [Laughter] I really do my Mana is expended I need to go back to base uh so create message bus that was a little cheeky League of Legends reference in there um go back to the fountain so create message bus so this is going to be I think we're gonna have something like events and these events is going to be like imagine that so I built like a vs code extension um I built a few in my career and we're gonna say let's say we just have some events which are going to be like log in and this is going to be a z dot object and that said the object is going to describe the properties that come along with login so we can have a username we can have a password imagine that we have log out here then we're going to just say Z to object and in fact what I was messing about with this API before I was thinking that instead of because these are always going to be objects because the way that you would call this is you would say messagebus.send and then you would send log in and do it like this basically and you would also send be able to send like messagebus.send log out and not need to pass the second parameter that's kind of my idea do you think people in Britain just use diesel I'm I mean I'm not like I'm not following this conversation at all because there's way too many people in here how many people are here I've got like a can you see the cup of tea in there hardly in there hardly any left um okay um so I need to somehow create this API do we think this is a good API because I should be able to say like message bus actually do I want to do this foreign people watching this you're gonna watch a man fail because we've got 60 Minutes to basically ship this entire API um this is all your fault it's the dregs okay so I'm gonna try and get this working so const create message bus and like because in order to send this like the sender actually needs to do something or maybe the create message soon actually uh if I go back one step like this is basically creating like some something where we store the messages on here um yeah it's just the jokes um and we need to actually like create a sender out of this so maybe we should be going const sender equals messagebus dot create sender and then inside here we would basically have a Handler which takes in an event which I'll just type as any for now and then like you know does window.postmessage for instance and post message events or in fact we could even just sort of pass it window.postmessage this would be really really good for electron apps for Chrome extensions for vs code extensions request response Emit and forget uh Emit and forget I think um I'm trying to create a message bus thing here I am going to try getting this thing working because we're going to need some fancy typescript to get it to work which I'm just going to whip through because I can do this stuff like on the back of my hand um and I kind of want to say message plus actor Dotson but I don't want this to create an actor let's say I don't want it to be able to I want to be able to this to say um let's actually think of like a more concrete use case because maybe we could stick that in the readme this is this is good so we gotta create message first let's say we've got um a chrome window here and this chrome window what we're trying to do oh my God my cats are trying to get into wait not Chrome window not a chrome window what's a good example hello Bandit I've got a cat here there's no time for cats um so this chrome window what you want to send to it let's say we've got a Chrome extension and we create the message bus this would save your life in electron okay cool uh yeah I kind of hate window.postmessage this is why I want to create this wrapper here okay cool we've got some good stuff happening in the comments um the create Center should have a sender and a receiver you should be able to plug in window.post message and window.event lists and right okay this I think is not going to be the Handler you're right though because we need a Handler I think we need a sender so like a function where we can create a sender and then also const Handler is going to be message bus dot create Handler and then inside here we're going to have an event and that's going to be the the events here and so Handler you can then like listen to it essentially so you'll be able to call Window dots add event listener message and then Handler and that Handler is that what I think it is this message event is I don't think it's assignable is it assignable vent dot data no it's not assignable damn um sorry I I drifted off a bit there yeah let's not forget about websockets so yeah yeah websockets definitely important here um I'm thinking web sockets I'm thinking electron apps I'm thinking um my cat's still here let me show you my cat I'm thinking other stuff too he's a rescue this is Bandit he's got a brother called patch who may be in imminently speed Rumba only singing yeah go light connection give me more give me more oh and yes Handler I yeah that's the question right like that's an open question is should the Handler unsubscribe or should it not foreign but I need to I need to do this at the very least so I need to type this so let's say const create message bus is going to be a function and this function it's going to have t which is going to extend a record string and what's this tank log in so no it's not going to be that it's going to be so log in usernames.string passwords.string I need to examine const oh yeah um sorry I'm going to be in the tank for a second here object equals z dot object what does that object take setup object takes a sword raw shape so I think I can just say Z dot Zod raw shape here and what that's going to do then is it's going to say okay Ops is going to be events and that's going to be uh T So then what's Happening Here create message bus what oh God's sake I misspelled it God's sake I misspelled it okay now Chrome extension is going to take void but that is now capturing login username there's another strings okay that's good so I want to take this now and I want to basically say um I want to say okay this is going to return some sort of event here now that event let's say we have a type example equals this is going to be T and it's going to extend the same thing as we have up here we want to be able to take that and we want to transform that t into yep K and key of t basically want to transform it into an event that looks kind of like this so be login or log underscore in username string password string it's going to be that that's what we want so the way that works then is we're going to say type is going to be K and now if we put example in here so we say example T example equals example T like I'm sorry I know a lot of you folks are going to be like what the hell is he doing but I'm going to get that I promise create message bus so now what we have is we have oh it's not being prettified I'm going to need a protify helper nope nope and this so I can do this it's not going to work should work Uh current message plus okay good so that what that protify helper did was it took something that was previously wrapped in something and then unwrapped it for us so now we can see what login is doing so now currently we're getting a type of login type login from this type so you can think of this it's kind of like we're testing an input and an output we have an input here and this is the output that we're getting what I want is I want to if I add like log out onto here log out and I just put an empty object there what I want to see is I want to see um basically type login or type log out like this that's what I want to see so but I'm not seeing that right now I am seeing an object with the keys of login and log out I can index into this I can say key of T that's really nice now I'm going to get type login and type log out and then I can go and oh God here's the tricky bit because how do I transform the Zod string stuff into there okay I look into z.zod object again let's look at that again where is it cost object equals it okay I'm losing my call a bit but it's fine we can get them okay zen.objects let's take a look inside this z.za object hello so this one takes in the okay T which extends odd raw shape which is the thing that we're doing so I can go and Z dot Zod object TK wait did that just work no okay Z dot schema uh infer look at that look at that look at that so this was the type I wanted login or username or string or password string or type log out and look at that type script is working yes please install prettier and please add like a prettier config or anything I'm going to check see if you guys put any more PRS but great we've got the first bit of magic working that's Epic give myself a heart attack here until typescript Zod um no Zod message bus oh yeah it's not total typescript it's under Matt pocock isn't it uh yeah here we go three pull requests oh my God add initial readme oh hello hello hello hello yes love it love it it's in unless we've got any conflicts better npm ignore all the files Yep looks great looks great merge I like that that's really nice next next you guys have been so helpful for this I've got two in it read news yep doesn't matter whether it's readme.md I'm going to cancel this one for the other one but I like the effort close will request and merge this one this is good we should probably like deploy this again so that folks sort of vaguely know what's going on yeah what just happened yeah I'm sorry about that I'm sorry about the Wizardry you know it comes with a territory guys it comes with the territory chat MPT wait wow what time are we on okay okay 43 minutes and we've got the first part of our API done that's bad um so now got our message bus I'm going to change this example to um maybe I need to put prettify around this yeah I know maybe here actually ignore me ignore me yeah if I put pritify around there and I remove it from there then that's going to be good I think if we have a look at that I know it's not great but it's fine okay so what we need to do now yeah puffer smoke wizard conjured up types if you want to learn more about types then you should look at you know you know the rest so we've got op start events now this means that we're like what I want to do now is I want to say okay messagebus.create sender so create sender what that's going to do is it's basically going to say um we need to return create sender now inside create sender we're going to accept a function and that function for now is just going to return void and create sender what I should be able to do is pass window.post message actually do once it's API message any Target origin string yeah um I'm gonna add some more crazy times here because what create sender is going to do is it's going to create an object where you can actually send to it so this sender down here Bam Bam let's actually do this so create sender now this funk I'm going to have to be generic about this I'll say t-funk extends uh ER arcs hmm any array and then it returns any and now this funk is going to be inferred as T funk now what we can do is we can basically then return a function and this example let me change this example because what this example actually does is it essentially says um this is going to be events config to discriminated Union and events complete the discriminated Union that's going to go there and we're going to say events as disco Union baby disco Union I love thinking about things as disco unions I think I've recently played disco releasing didn't finish it though but God it was good so now funk ah sure ah no this can't be right okay I was thinking that I I would take create sender and I would take the thing that was passed in and then I would basically say yeah okay no it isn't generic that's fine um so this needs to take this funk is gonna tick it's gonna be this gonna return void and it's going to take event S as disco Union now you see why that was working and it's going to return um it's gonna return funk I think Handler Ascender ah sender so what we can do now is we can now say uh yeah I'm going to change this API a little bit and let me just show you what we've just done yeah I do want to I do want to have multiple senders and you can with this API I think because you can create multiple different senders yeah I think so uh join your local disco Union okay let me comment out some stuff because now this send function just based on this message bus that we've created here now this actually takes in a union of all the things that we want so we can say send and now we can say type login and password one two three and then username and look at that if we remove username from this now username will be gone from here too and if we do log out instead of this then it's not going to ask us to require anything else ah it's beautiful no because I um okay wouldn't it be better to merge create sender and create Handler inside the create message bus options no I think I want to actually create like a builder pattern out of this because if you what this means then is you can have one message bus which sort of sits globally and then on one side let's say on the Chrome extension side you would have like because on a Chrome extension you have multiple different environments at once you have the browser and then you have the environment that the Chrome extension sits in this means that both files could import from the same message bus and they could both use the same message bus for sending stuff back and forth so that means that you end up with a um like a a really cool API because it means that everything is type safe back and forth you can have these different message buses sitting around that sort of message bus is the right name oh okay um but what that means then is you have these different senders that actually have different functionality so I'm not going to merge it into the same object I'm going to use a builder pattern what am I doing I am trying to create a npm library in like 90 minutes we are this far through we have not built our API yet um but I shouldn't care if you have a subscriber send it yes it should be decoupled exactly so we're doing pretty well we've got to send them now then let's create a Handler uh create Handler and this funk I think is going to be the same thing actually and for now just return the funk yeah like protocol yeah it is more like a protocol I don't really like let's go create message protocol yeah it's sort of like a spec right oh you made a pretty appear let me check oh my gosh oh comfy and run for it here let me check let's lock hand on here but he ran prettier I can't ah [Music] damn it wait these tabs all these spaces I don't know what these are tablet tablet four tab with four tablet four goodbye true I pretty it is a chore isn't it Prim with a hundred tablet four tab with four hundred what a what this is just troll okay is this gonna be better pretty much 100 tap with two he's got it he's got it yes lint I'll see yes lint TSC what typescript nah uh no no just prettier please I don't really I mean excellent's fine but I've got time script I'm I'm two I'm two all the way tab with four how dare you how dare you sir or madam okay it's a great Handler because I mean I guess they should CR like it shouldn't create a handle it should create a listener right um exactly uh so let's say create listen there um okay I like create message protocol folks I like create message protocol I think that's going to be the name of the sort of main entry point of the API do we agree create message protocol it's cool it sounds smart it sounds smarter than it is it sounds like it's using some cool terms and it sounds safe you know what I mean so and we're starting to get a sense of what our API is going to be so I'm gonna like in a minute we're going to be writing tests and stuff and while I'm writing tests I think someone needs to be writing the readme so can someone like how many of us are in here by the way nice check but how many of us are in here someone comment like create times um we like I need someone to be right in the readme can you volunteer to write the readme and you're gonna need to hang around and I'm going to point to you and you say write the readme now you disagree oh no it sounds so professional yeah okay good okay I I cool your messages are starting to roll into me let's freaking go so create message protocol ah just rocking and rolling 280 my gosh man no I like the creates um I think it's ergonomic I don't want it to be just messy place call so we're gonna say this is going to be create a hand create listener so create listener what it's going to do is it's going to gotta like hmm because a listener you think actually like because what it kind of needs to do no I'm actually going to say create Handler for this because if you think you're create listener what it does is it's actually going to be like listening in to something I'm going to be checking something out um and it needs to like exist over a period of time whereas create Handler sort of makes me think of okay this is going to be like a um uh something that huh something that just sort of like a reducer almost just takes the input and sort of you choose what to do with it it's kind of like a new piano with it at yes lint so it's it's a little bit um easier uh certainly lighter for the API to do oh yeah and tablet too good use tabs true use tabs true eh I mean it's pretty who cares yeah let's do it okay bam we're in merge good stuff Joe Hall Johan okay so I think I need to pull this stuff down I've just been messing about with stuff yeah I thought that would happen I get stash yeah some changes please don't please don't make me do merge conflicts oh why did I accept both changes no no what am I done what have I done stage changes no oh yeah I added peer dependencies I added salted let me just saw myself I know it's done it's fine what have I done what have I done what have I done what what's going on pretty RC yeah yeah yeah yeah yeah that seems fine does this seem fine what's happened send it a cleanup method yeah yeah so listener that's that's my thank you for listener is that I don't have to send the um uh uh The Listener to it what time are we on oh my God 35 minutes left for quite out loud we need to land on an API for this and I think this is okay so we've got yeah the thing that isn't working here yeah this Handler then is basically just a function which takes in this stuff and you handle it from there that's nice so we've got to create Handler and we've got to create sender so this indicates that we need to be doing some sort of like checking in the inputs there but for now I'm happy with this API so we need to stick this inside to more reasonable files because currently it's just inside a playground let's stick it in here for now we need to import uh from Zord we need to get the Z into there and I'm going to put this in some separate files now we need to create message protocol.ts we just stick this in here so index.ts create message protocol stick it in there uh let's put that there and let's add this import up here okay we're going to need a tapes.ts fail time stop TS stick that in there and then inside index.ts I'm going to take all these fancy tapings and I'll put that up there so what we end up with as a little tape like that is that doing anything no we're going to say import from Zord and then take the Z stick it there and I think we're good but we just need to export all of this stuff we're gonna put it in index.ts we're going to now get rid of all this crud and then stick that back in the playground so that makes me happy we'll sort out you in a minute and then we're going to oh no I don't know there's a car no I was a cat there's two cats there's two cats beside me export from um playground no not playground what am I doing uh create massive protocol and type stop TS we're going to fix these Imports by importing from the right spots then we're good to go who's got who's Montgomery Scott we're gonna fix this and then we're gonna try running PMP and run CI good I'll see how it's passing that's good that indicates to me oh I didn't uh merge um sorry folks I've not been pushing stuff up um I don't have to pet the cats I don't have to Raphael I could I spend a lot of time petting those cats um okay let's say pmpm run change set um pmpm change sets let's make it a minor because in a minor we like want to indicate that something has changed added creates message protocol apis yes my design change sets I think we've got something pretty good here you know um added change set and create added basic frame of API look at this for commit message discipline I've got some commit messages to plan I think we now need to ship this pmpm change set version like conversion pushed for the very first time oh that was a bit pitchy pushed for the very first time like a version feel your repository next to mine think we can say the API is built go that took a while 37 minutes to build the API good Lord okay but this is good though so we got Craig Mr protocol working this saw seems to be working now it's time for tests it's time for tests laughs I've got commitment message discipline come on I do you got any more PR's four PR's why they're four PRS no version packages okay that's dead now because we don't need to worry about it um because we just did the versions ourselves removed [Laughter] I mean I do agree so I will merge this yet extremely silly closed oh no got a resolve conflicts resolve conflict son and then I'll merge it um this is good though what else we got for requests everyone's laying into this installation oh you remember these why'd you move this um wait what what what happened there huh why is that why is that div so different I handle to receiver yeah maybe send a receiver I kind of dig that actually let me do that is there a song that I can sing to that one while I narrate this create receiver yeah makes sense I like it receiver receiver I hardly know her Handler sender oh gosh okay what do this this get nice uh info to package.json wants info um what do you want keyword so typescript oh yes yes yes yes yes yes this is great thank you running route peaceful we've got our API um yeah Funk to handle it probably but I need to start writing some tests now so I'm going to say pnpn uh run Dev and I need to start scaffolding out the tests that I actually want to check out so index.test.ts God I'm starting to get hungry too foreign how long do we have until we need to delete the repo we have okay we have 28 minutes until we need to delete the repo 1.0 published I'm basically going to do that as soon as the readme is written receiver is better I agree send a receiver I'm a believer I'm a Believer I could send a receiver if I tried and sign into that and say create message protocol um okay come on we've got to see that see the other cat I know it's not the same cat very similar sometimes he'll let me do this too looking up at me plaintively can you hear the sound too maybe lunch break I mean it's like 6 20 here it's like pancake day as well so I'm desperate for some food yeah I know I haven't run prettier on everything yet I should probably do that but I just can't be asked um we'll get around to it um how many of you are here for the folks who just joined we have 28 minutes to ship something and we have a couple more steps to make yeah the same color black and white the brothers and if we don't ship it in time we have to delete everything we've done so the entire course of my life will have been a waste let's get going so we want it should create a type safe sender that's sender what do you want oh no don't fight don't fight they're fighting at the door I should do um yeah let's just say to do for now thank you copilot um yeah should create a typesafe receiver um but I should describe this better so it should foreign no that's that's the same stuff should allow send should error if um sent message is uh not the shape needed not shape needed uh does not match an event okay it should error if a pass if a sent message matches an event God freaking test descriptions is the worst should if I received message matches an event ah you know what this is good though should error because there's kind of not much here right if a does not matches and match an event I think we're good invalid format uh I'm happy with this I'm happy with this let's ship it um okay so we need to create a message protocol the message protocol is going to be message protocol oh God just my singing voice is just shot um create master protocol I need to import that we needed to say events inside here God this is a nice API Zed no it's not an object it's just going to be yeah we're going to say username string no username said Dot string and we need to grab Z from Zod password go there log out go there empty object this is real nice you know oh yeah it does not match an events yeah not um okay so now message protocol what we can do is we can create a sender and a receiver up here sender equals message protocol create sender oh and we can go retest dot FN I guess no but then we need to kind of create it per test I think so because we need to keep track of the um calls to that function so we can say vtest.fn const um sender it's going to be this no test sender uh test sender okay good good good um Mr word match and last test does not an event it does not match an event thank you um your passive Ascent message event okay um I'm gonna scaffold this as well and I'm going to then call sender with type login and then TS expect error if you don't know what this directive does it basically says the typescript okay we should expect an error here this is good because it's testing our types as well as a runtime stuff so we should now expect and I always forget the API for this um like this and then it's like I don't know this needs to go there now and it's something like to throw and let's see what's happening oh I would expect the function to throw an error and it didn't Cipher was a cipher my Disney what's my Disney movie with an accident what is this it's just my voice just my voice mate ah man and then I guess we should say expect um test sender not to have been called yep that's good okay with this is good red green refactor looking for this directive I guess you learned something we'd have time for you to learn something unfortunately because I need to be actually doing stuff so I can say sender and I can just say sender uh password uh password and let's say username username perfect now we can say expect test sender to have been called with and we can say type login password password username username oh it's very nice so now we're actually getting a passing test if we look at it so we've got it.skip I'm just going to say it does Skip again um yeah okay so actually this this test is passing because we're actually like creating this sender and we've got the test sender which is a mock function we're checking if the mock function has been called and if the much function has been called we expect it to be called with a certain thing a certain object so this one's working this one's not working because Zod isn't involved yet so we need to actually go into create sender and all we need to do is we need to return a funk and this funk is going to take an event which is event size disco Union disco Union baby yeah and the event schema is going to be this what yes it does um typescript I know what I'm about I know that this always contains a type oh no it's not a real shape there's a bug there's a bug there's a bug there's a bug there's a bug in our API which is you can specify type Z dot string here that's not good we do not want that we want that type to be never yeah okay tubing cool times yep test sender to have been called once that's nice that's a bug though because we need to somehow like look inside this type and omit the type from it up yo so can I do this can I like just say like on this type I know that's pretty weird okay you're still not happy oh this is not a schema though is it because I know that if event has a type on it yeah okay okay so I need to call like dot object I'm not sure that's good though because we're sort of like we whenever the whenever the sender is called we're now like uh calling Zed objects so re-instantiating that function but holy cow I've got 90 minutes left 19 minutes left as any when you came and you gave me as any then I sent you away oh any what oh no I put it around the wrong one you kiss me and stopped me from shaking servant schema that's good um event schemer.pass events and then inside here I will call this sender now we actually end up sending the evante oh yeah and we want to actually send the past version of the event that's good events came out past event disco Union could be statue oh no why that's happening oh God it's kind of Niche though it's because it extends so it needs to extend type string there we go event schema.pass this this game no this is fine this is going to be an event as the screen so we're happy yeah I think we're happy Okay now what's happening with the types okay so it is erroring oh oh yeah don't do this uh yeah I know I'm sorry this is this is this is nuts um I know I know um I didn't know what the API was Joel so I was just messing about okay sender passivet and the reason this is happening is because we don't actually have so it should be Z dot object with this and type is zed.literal event.type so now the test should be passed okay okay good we've got half way done now we go back to test.ts now the reason that's working is because the one that like this wasn't working before because I was just using um basically if we open this up to here open the test file the reason this wasn't working is that we were basically only passing this into the schema whereas what we needed to do was basically add a type which is z.little event type and I think I might can I get rid of this as well no I can't I will um oh epic epic epic epic epic okay this is good um so now our tests are passing now we just need to handle the Handler read me it's it's read me time it's read me time um what two type is not part of the schema oh gosh oh gosh yeah I know well Bots are here listen I don't I don't have time to deal with the boss okay we need to instantiate these now so this then we need to say const blah blah blah hmm I mean now I think about it these are sort of the same thing right Handler and sender are the same thing if you think about it like I'm just going to end up writing this exact same code again because sure receiver it's going to basically just be a function that receives one of these events and then does something with it so that's what we're doing we're just creating handlers sender and receiver doesn't make sense it's just a Handler I think I just simplified our API simplified API means less code get out create Handler great Handler handled message dry yeah yeah why would I repeat myself why creating Point great endpoint um I think Handler is just a function it's just a types of function yeah middleware now hmm I'm still alive we talking about um okay Christmas protocol I mean uh that's gone create massive protocol I can pmpm change that let me let me pull let me check your PR's anyone pring four pull requests for God's sake oh my God stop stop moaning about tabs and spaces stop it stop it is this pretty ignore no stop it okay use tab's faults fine but I oh um tabs of space is rubbish a husky I know I don't want pre-commit hooks do I link staged oh this makes sense but I don't have time this makes sense I mean I'm gonna have to delete all these PRS if we don't finish so I'm I'm are there any more anymore movies tabs spread it emerge okay this is just one file change this freaking payoff man yeah going in this much okay okay okay okay okay um I can pull that should be fine I'll just go and save all my files to make sure that I've got the tabs working there you go now all that's changed types.ts working um pnpm change sets let's add a change set this is going to be a patch version it's going to say implemented functionality with Zod design change set done um completed work now commit message discipline um okay okay okay okay okay um wait but there's that's Test passing isn't it I need to probably ship don't I but that's Test passing so okay we've got our action oh I've got to say why did I name it that that's stupid wait why is why is things breaking is the build broken I didn't realize it is there something in playground that's not working playground.ts I forgot to say yeah that's gonna show up okay create Handler ah time uh fixed build oh go away look look look look look I was young and I needed to ship and commit messages are just toilet paper they just go off into the ether who cares about commit messages really really hmm ah no time's not up time's not up look look look uh streaming with face time is not up we have the oh my God 12 minutes okay so we've got to like tests are passing now yeah here we go yeah even those tests passed that's good okay fix the build we've now got should have a pull request to merge this in version packages let's merge it in yeah here we go this is going to send it live this is going to be a 0.1.1 release nice how to receive stuff now yeah only doing sending um I mean this is just a Handler right so now we need to come up with something for the version because the tester passing that means we can do a split that means we're going to write the readme that means we've got a 1.0.0 published okay so we've got a Handler now this hand now in order to figure out like the right way to express this um yeah we've got to change that um in order to figure out the right way to express this we need to figure out the use case what is the actual use case for this because and like how do you explain it and this is like where my brain starts to fall apart because my use cases for this are like pretty niche this Zod message bus thing that we created like how do you actually explain it because we were talking about creating a message protocol that lets you send between different um different environments so I guess we need several examples we need one for like web sockets yeah one for websockets thank you Vigo uh you could do one for like a Chrome extension doing for a vs code extension do one for electron apps but I haven't built an electron app I just know that it's good for an electron app okay yeah and add event listener and post message broker is Zord broker it's like a message protocol like we don't have yeah we need to redeploy this so package.json zodmessage bus uh let's get rid of all the buses buses are gone buses are out what's in um oh hang on string over my face zombies bus protocol and I said broker broker hardly newer it's old message protocol let's do it pmpm run change sets and it should just work I think actually so changed name to Zod message protocol design tune yes um done oh wait I didn't add a commitment God's sake don't say it's frozen now oh no no go away just didn't add a commit message as that's how far I've gone uh changed name to Zod message protocol good um that's odd transport is good God we're gonna get lost here though how long we got left eight minutes okay so I'm gonna go in the playground um I actually like don't know how to use the um Native websocket API which is really troubling me um because I've sort of Never Had A Cause to I always use like a wrapper but now I can't even remember what rappers I've used because the previous rappers I've used were like graphql subscriptions which just basically let you like talk to the server and the graphql thing just handles it all for you so and that handles all of the message passing as well um yeah I love I've been writing about message commit messages and the thing that we're doing is like safe messaging um oh so okay this is really getting to me now we need to just start action before motivation oh read me already exists of course someone scaffold it for you this odd message bus odd message protocol let me change this to Zod message protocol was that even the name that we came up with I think it was on Mission protocol yes it's odd message protocol um gives you let's stick this up here let's do a little preview window so we can see what we're doing um uh type safe gives you type safe access I mean I just need to check the PRS because if someone's like done something for this already then we're in a really good spot that's what I should pass version packages okay yeah with this is good because we can deploy this no one's writing the readme why aren't you writing to read me I can't relax um I'm actually just going to put this on here because woo wait I need to I need to how do I do this oh crap okay there we go this is fine six minutes six minutes for cos sake um yes this is good okay uh installation gives you type safe access between a message passing between two different environments go to the playground grab this and then we can say create Handler so let's say we've got like three files here let's say we've got um uh protocol.ts here okay what was that what's that um we got a message bus here so this is good we can see it on the right hand side too um protocol.ts this creates the protocol and now that protocol if I just sort of like uh nip over to the playground as well let's open that to playground um and let's say we create a sender no no um so let's say we have environment ah okay two different iframes two different iframes yeah runtime safety um type save message passing using Zod between two different environments okay so now what we would have is like iframe dot TS let's say where what we do is we create a const receiver equals protocol dots um okay let me go back to the playground because I need my autocomplete to get this done um protocol createhander so this is inside iframe.ts and this will be like send to parents so this means you create a Handler and you basically say window dot iframe no no no uh window.post message yeah window.parent.postmessage that's so simple so now that's just sends the parent and then we say const receive from parents and actually parent Handler no no no no no no um const receive window dots add event listener message and we're now going to say um we probably need to just add like a pass function here don't we like in create message protocol we need just the ability to just pass it oh God oh God no there's more kobans right no we can't do that we can't do that we can't offer that well that'll be version two um we go event and then we say um protocol dot create Handler um no we need to call that so now we can have a const Handler equals protocol.create Handler and then I guess oh God there's more API options sort of coming to me why didn't I do this earlier um we just console all the event and we just say Handler event.data okay okay [Music] um handle parent event handle parent events so this then is basically the idea um and you have parent.ts and then what you can do is you can say consent a child const iframe we're getting somewhere equals document.create no not create element uh get element by ID um my iframe then you say um no send const send to uh child yep um iframe content window why why why why why why no what's the API for this how do you send how do you send messages to a child iframe how do you send messages to a child our friend help me help me I've got two minutes oh God I need to check ambient why can't I access the content window yeah it's fine it's fine that's fine isn't it yes it doesn't know it's an iPhone of course uh wait is that generic is that generic no it's not generic so uh query selector um and if I do iframe then it works yes it works doesn't it yes it works brilliant it doesn't know it's an iframe okay this is going in the readme readme.md um okay God we need to deploy this as well um uh type save function save sender type save receiver I don't think I need this I don't think I need the parents oh my God I've got a Spam caller go away go away go away oh read me um playground I don't want any changes to it or do I want changes to it uh as long as they're type safe that's good ship the readme uh sync changes now we need to go back to the page.json we need to say pnpn run change set we're going to ship a major version no bmpm to change that and I need to ship a major major is going to be uh yes yes yes yes yes yes um ah did I change that true yes healthy turkey's beam what the frick is this um read me I'm just gonna copy the readme in there because you know that's good that's good practice right um uh don't want uh oh no oh no no no wait what time is it what time is it how long how long how long foreign foreign I really thought we're gonna do that I thought we're gonna get it my blood pressure come on let's do it let's kill the repo see the upper directory it's odd message bus any last words oh in fact this isn't the final step get rid of this all gone it's in the bin um let's um let's go now to God where are we even yeah settings danger zone let's delete this Repository we are gathered here today to celebrate the life of Zord message bus nay Zod message protocol it's been um an extraordinary Journey 90 minutes of pure frenetic hell and thank you all for your wonderful PRS and joining me in this journey let me put my glasses on so time to pay your respects I will not be accepting Forks what a ride [Laughter] ashes do ashes duster dust something something I do understand the consequences oh for God's sake [Laughter] God's sake oh hang on I think I can use more for this oh my God it's an emotional moment I've got a freaking two-factor authenticate stupid oh what's going on even God my notifications are just a mess my nerves are shut up incorrect password for God's sake look yeah all right yeah I guess you can't unpublish on npm but I I mean I didn't think I put anything useful up here did I can I not I guess I could make it private oh hello once you delete this package you will lose access to it please be certain I'm certain yeah here we go deletion request received all right well this was pretty fun actually I didn't expect it to end this way I expected us to like Roar onto Twitter with our brand new wonderful Library I still think it's quite a good idea for a library I still wasn't perfectly happy with the API um but we shipped it to npm we did everything except right the freaking readme thank you so much for hanging out I'm gonna quit the Stream uh if you like this Shenanigans then you should uh check out my total typescript course because it's good I put a lot more time into it than I did was able to for this I've been working on it for like the last four months or something time to go and see the cats and um see what's happening I'm gonna go and eat some pancakes I deleted your start I know I deleted all your PR's all your tab width uh I blame the prettier config PRS I will be doing this um not I'm not gonna do um I'm gonna do this again because this was stressful but next Tuesday at the same time I'm gonna be streaming about the great debates in typescript I'm going to be streaming about types versus interfaces enums versus string unions um comment about loads of other stuff as well I've got a list someone um thank you so much for joining along let's finish it then yep session is recorded don't you worry I want to see the code as well I thought we did a pretty good job there just 90 minutes of my work down the drain lemon sugar is is the devil's work I really hate pancakes in general but with you smother it with like chocolate and stuff it's great return types are not yet that's a good one that's a great one I'm not doing tabs versus weird enough tabs versus spaces I think I actually do blame the tabs versus spaces oh yeah you should check my output if you don't like enums talk about Tailwind nah you should check out Simon reclosa's course on Tailwind all right let's say good night thanks guys ladies friends non-binary Pals oh yeah

Channel: Matt Pocock

Views: 36,906

Keywords:

Id: aKTSC4D1GL8

Length: 114min 17sec (6857 seconds)

Published: Wed Feb 22 2023