 How old are you? My partner doesn't answer. I'm like I'm playing Zelda and then I'm done and I stand up and I make some stupid joke and he's like 29 mate Farts are still funny So so the official starting word of any hv2 or free episode I thought I would do some code this time. All right because it's been you and I'm getting bored of that Yeah, I will talk about something that I've been Encountering and realized that's actually kind of new and it's I'm a polyfilts which are not new But conditional loading of polyfilts in a world where we all use ES6 modules All right, because it's quite an important thing to do now because we're in a situation where You know some browsers have like web components some don't and you don't want to be loading all those polyfills for all It can be quite big But also you don't want to like go to the lowest common denominator all the time because that's not the great experience for you as a developer All right, come on show me what you got Right, it's not not polyfilts yet. But for example, let's say I want to use transform streams personally I've been loving transform streams. They are amazing. Yes Not only just to do streams, but I actually just use them as a as a fifo queue For example, if you want to if you have an event handler and you want to make sure your previous event is Completely processed before you process the next one. Just pipe into a transform stream Because the if you're returning a promise from your transform stream handler It's not going to give you the next one until all that's resolved and it buffers it up That's actually quite neat. Very clever. Right. Okay problem though. We have transform stream in chrome I think they're just about to land. It's a far Farry they're not in firefox. I should look this up. I don't know but there's Basically what I'm saying is the landscape is uneven in terms of support for transform stream Right. So what you want to do is load A polyfill. Yes. And so in in the olden days, you would just do this, right? You would just put a script tag ahead And you could be sure that that script tag would execute before the other one executes transform stream is fully polyfillable Exactly, it's completely it's technically completely user land But you don't want to load that code usually right so in this case the polyfill would Put their implantation on the global Maybe even only if it is not already there So you would use a native implantation because it might be faster and otherwise it just adds it and then transform stream exists And you can just use it great Right brilliant problem now, of course is it gets loaded every time Yes, and you might have a browser that doesn't need to load that it might be a lot of code Like chrome right now like and if you can avoid that Yeah, you would want to avoid that excellent. So now let's look into how you do conditional learning and that's Where we already start looking into Like importing stuff because in the olden days again You would probably create a script tag dynamically and wait for the on note event now. We have dynamic import And I think this is something I got wrong in a previous episode because you can use the dynamic import Even in a regular script. Yes, you can that's very good. It's very exciting You don't have to use a module script to use dynamic import only for static import So in this case i'm just taking dust transform stream exist on self. Yep, and if that is not the case Time to load the thing right so this is a module that's not Returning anything. No, that's it's a polyfill. It just attaches to the global right, okay, okay, that's exactly the point We are now Preferring in advocating people to don't in general polyfill shouldn't do that They shouldn't attach them to the globals because then you land in this place where you might be overriding in native implementation That might not be up to date or it's it can there are so many complications the whole uh smooch problem Exactly, we don't want to have a second smooch. So the usually if you if you publish a polyfill Use something that exposes just the thing to you and you can decide if you want to attach it to the global Or handle it yourself brilliant. So instead of a polyfill you would use a module Something that doesn't actually modify the global at all, but just returns Something to you that you can use. Okay. Okay. And so in this case We're just importing and don't use it. So in this case This will still be undefined. So this right doesn't work anymore Right because it's expecting like something around here to be returned and that would be your module Right, okay So now we have a module that exposes these things. Yes, but you can't Just attach them to the global because you have to load them ahead every time you have to at the start of your module You have now to check do does it exist? Does it not exist? If it doesn't exist Hold the entire module until I've loaded the polyfill Oh, I see and then I have to Load the module rip it out and attach it to the global Right because especially if it's like third party code you want all of that to wait somehow and it gets really weird Right. Okay. Yep. Yep. Yep. So now let's move on to proper modern world es6 modules. How could we solve this? The first Version bracing for modern javascript. Boom. Oh, look at that modern javascript We just turn it into a very very small two line module that loads the module attached to the global and you depend on this module In every other modulate user streams, right? And we've we've avoided the whole I mean this is still going to be asynchronous in terms of it's not going to block the main thread, but it's Synchronous in terms of that code that comes after it because and so this is completely valid completely Acceptable way to go about it, right? Right. So this works in the sense that you load the polyfill And it's just a global and all your code will now work for the polyfill if necessary But we lost the conditional loading Ah, yes, of course because conditional loading is not possible with static imports because they're static Yes, that is true That's kind of like it's it kind of hidden and once you think like wait, I cannot do you can't put an if statement around that The import has to be either you depend on this module or you don't Right the second you want to do conditional loading you have to go to ramic import And then you're back at the problem because now I have to hold my module until it actually Under the polyfill is loaded and that's really weird. Do you have a I hope this is going to end with a solution I have a solution I don't think it's perfect But I actually have been using and it's quite nice because the second problem with static import is it Delays the execution of the module even though you might only need the transform stream in some specific method Right, I see I see and that could be like a few interactions away Exactly. I might reload it at a deferred point or even on demand if it's some sort of background task So what I've been using is a different approach which feels a bit weird, but actually as a pattern works really well All right I'm creating a promise you are yes And so I'm creating a transform stream promise and that I can now Use an if statement and then check If transform stream exists, I'm just going to return the native transform stream I see And if not, I'm going to dynamically load the polyfill And return that one Yes So now we have a promise that will always resolve to a transform stream constructor And it might be the native one. It might be the polyfilled one But you don't have to worry about it anymore Right and that means your module can execute as fast as possible or as soon as possible And we'll load the code the second you need to And so this is this is going to be you've got the asynchronous problem back, right? Sure But that is usually this is kind of specific to the point of streams But most of the time streams are in a asynchronous context anyway So that's true either on the sending side You don't need to worry that it's a promise most of the time because it's already you can just Resolve it in line the function can return earlier and just Wait for this from to resolve and then send it because you don't need to worry about it On the receiving side It's asynchronous anyway because it's a stream So you most of them have an async that you can use a weight to await this thing Excellent. So I mean, so this is this is a pattern that works really well for for code that You're in control of right because you're now using transform stream promise instead of transform if it's for third party Code that is rely that is expecting transform to be on the global That's when you're going to have to delay the loading of that that being said if you have third party code It relies on transform streams something is a little bit Oh I'm I've got mixed feelings about that because I see what you're saying But then you could end up if each library is loading a polyfill for transform streams You've got that you could end up with problem where you're you're loading You know five libraries that are using transform stream each loading their own polyfill And unless they're using exactly the same version in that sense though That's where you would dynamically load the polyfill So then dynamically load the third part of scripts Yes, and just because I some people might be disgusted by this pattern at the bottom where you like await something and immediately call new You can also write in two lines, which might be nicer Of course Probably the miniferous will go back and package it back up because of what minifers do nowadays And if you're confident in that the polyfill is is feature complete and the spec is settled then This is a point where you could assign it to the global if you are loading third party code But I feel like the promissified constructor pattern is a really nice way of loading polyfills on demands Ensuring for you to run as much code as possible with the request as possible at the start And you're loading this ahead of time as well, but asynchronously so And that's your choice now you can decide when the loading happens if you're like actually I don't need to load this Right at the start. I can actually load it In request. I will call back. You can do that as well The things work now Hulk is back Have you seen my bicep? This is like made of steel made of soy