(upbeat music) Okay, we've gotten pretty far on Blaze and learning the ins and outs of how to work around folding constraints. There's one final feature I wanna cover that's like your last defense against not being able to fold something. If you really wanna fold a component and you can't figure out another way to get around it, this is something you can do.

and you can't figure out another way to get around it, this is something you can do. It's called Unblaze. Let's check it out. So here's that file benchmark. We just have test inside of it and then this component called test, simplest thing we could do, a div. And inside of it, we have something purely dynamic. Now, the current time, okay?

And inside of it, we have something purely dynamic. Now, the current time, okay? If I load this in the browser, you'll see that every time I refresh the page, now stays consistent, right? Or stays updated. And then if we look at the compiled view of what this benchmark file compiles to, we see that it's doing normal compiling to a Blaze function call

we see that it's doing normal compiling to a Blaze function call to re-render the component every time. So let's fold it. What happens when we fold it? You could guess at this point. If I hit fold and let me just run something in here so that this stays up to date. If we save this file, we fold it, check it out. It folded everything.

If we save this file, we fold it, check it out. It folded everything. The div and the dynamic contents inside. Again, it's like in Lord of the Rings. I just finished reading the books. In the, or in the Hobbit with the trolls. When the sun comes out, trolls turn into stone. Code folding is trolls turning into stone when the sun comes out. So these were trolls before.

when the sun comes out. So these were trolls before. Happy and alive in the dark. Then the sun came out when we folded and bam. They're hard-coded now into this compiled view. Never to change, right? And now if we load this in the browser, it's stuck on 37. It won't change at all. That's no bueno. Say hello to unblaze.

That's no bueno. Say hello to unblaze. Unblaze is awesome. It's this really nice, easy way to just say, hey, punch a hole in this component. Punch a dynamic hole in this component so that when you fold it, I want you to preserve whatever is inside here. I want you to keep that dynamic. So I save it and let's see just it works.

I want you to keep that dynamic. So I save it and let's see just it works. So it works in the browser. Everything's working. Let's look at the compiled view and see what it looks like. Okay, we're still folding that opening div, right? But this portion here, this stays dynamic. And you can see there's some stuff around it. Unblaze basically adds these scope variables which we'll see in a better example in a minute.

Unblaze basically adds these scope variables which we'll see in a better example in a minute. But the point is right now that you're folding, it's partial folding again, except this time instead of doing complicated things like setting things as safe and whatnot, you're just punching a hole in it and you're saying keep this part exactly dynamic, okay? So unblaze, super powerful, really nice thing. But this example is kind of contrived.

So unblaze, super powerful, really nice thing. But this example is kind of contrived. I don't know many times you're going to need to echo now, although it would be great for that, but I don't know. So let's do a more fleshed out example. We have a form in Livewire, one field, public title. We had a Save button, we validate the title is required, just to trigger validation. This is the form, this is the input component. Let's open the input component and it's pretty straightforward.

This is the form, this is the input component. Let's open the input component and it's pretty straightforward. We have props, name and label, and we're rendering a label and an input and then this error stuff down here. So this is the part that is dynamic because if you think about it, when an error happens at runtime, we need this to run. We need to actually check the global error bag to display a validation error.

We need to actually check the global error bag to display a validation error. Let's load this in the browser and show you what I'm talking about. If I hit Save, there we go. The title field is required, it pops up, fine. Now, we go to fold it, we say fold true. And before we do this, let me open up this, okay. So this is the compiled version of this file. So this form element here, we can look at form

So this is the compiled version of this file. So this form element here, we can look at form and we can see that this X input component is not folded at all, it's just stuck right there, okay? But now we add fold true, we load the page again and we should get an error. We probably have to clear the view cache, okay? Now we get an error invalid at Blaze fold usage in component. Error directive should not use at Blaze fold as errors are request specific.

Error directive should not use at Blaze fold as errors are request specific. So thank you, Blaze. We added a few of these inside of Blaze that's like, listen, we know you should never use at error in a folded component. So we'll just check for it and warn you, we warn against request and other helpers like that. But yeah, error is disallowed, we're not allowed to use it. So it won't even let us fold it.

But yeah, error is disallowed, we're not allowed to use it. So it won't even let us fold it. But we can get around this just like we did before. So we say, unblaze and pop all this stuff inside there and unblaze, okay? Now maybe we're out of the woods now, I save it, I reload the page and it says hmm, undefined variable name, interesting. So this kind of makes sense if you think about it. All of this got folded, there is no more name prop,

So this kind of makes sense if you think about it. All of this got folded, there is no more name prop, there is no more name variable. That all got folded, we just have an island now with no scope being provided. We can even look at the compiled view to see that. There we go, there's our form element. And now this input component has been folded, it's now a div and it's got label, it's got title, the name that was title

it's now a div and it's got label, it's got title, the name that was title is hard coded in there. There's our unblaze hatch right there and then this is all stuff Laravel adds for at error. But we're accessing dollar sign name somewhere. I don't know, I can't really see it. Maybe we have to scroll to see it. There it is, there's name, okay? So what I'm telling you is scope is walled off

There it is, there's name, okay? So what I'm telling you is scope is walled off when you use atblaze. So what do we do? Well, we added a feature where you can actually provide a scope variable to the unblaze block and define it up here. So you can take scope, like let's say, I wanna provide the scope name inside here and now you get a scope variable

I wanna provide the scope name inside here and now you get a scope variable that you can access anything you provided it right inside here like this. Now I refresh and take a look at it, it still works. And if we look at the compiled output, we broke folding, let's recompile and make sure that that's what's, okay, there we go. Folding works. So div is folded, label is folded, everything is folded.

Folding works. So div is folded, label is folded, everything is folded. But then we have our unblaze block down here and you'll notice, let me pull this up so it's a little bit easier to see. You'll notice that this scope stuff gets set right here and it says name is equal to title. It's really simple. We literally say scope equals array, name title. And now all of that stuff stays exactly as it was

We literally say scope equals array, name title. And now all of that stuff stays exactly as it was and then when we access scope like this, we're accessing something that actually exists. So hopefully that made sense to you. But unblaze is a wall. It's a scope wall and you can break through that wall or provide a bridge of scope over that wall with this little scope thing here and then accessing the scope variable.

with this little scope thing here and then accessing the scope variable. So the only place that I've really used unblaze is for error bags. For error bags and also checking the current URL for like a navigation item. Those are two times that I've used it, but they are extremely important. And I use error bags in all sorts of components because I have a date picker component.

And I use error bags in all sorts of components because I have a date picker component. I have, you know, whatever, but this is something that we use quite a lot. It's incredibly useful and it allows you to get all that juice of folding and it's just another escape hatch for it. So that's it. That's all the little escape hatches, how to get around folding restrictions

That's all the little escape hatches, how to get around folding restrictions because folding is so valuable that at least for us in flux, we need to fold every opportunity we possibly can because the gains are just that big. So that's it. That pretty much wraps up the series in terms of knowledge that I wanted to put from my head into your head and now you have it

that I wanted to put from my head into your head and now you have it and you can make these decisions on your own and reason about it in your own app. You know, everybody's different. Everybody has different needs. Maybe you're only using flux and you don't need to know this stuff and that's fine, but maybe you're trying to do something bigger in a bigger app and this stuff's very valuable.

but maybe you're trying to do something bigger in a bigger app and this stuff's very valuable. But that pretty much wraps up the content part of this series. There might be things at the end of this like maybe I'll show you how to use AI to determine if a component should be folded or not. But even if we have AI tools available, you're still going to want to use your own brain. You're still going to want to know this stuff because I've used AI and AI can only do so good

You're still going to want to know this stuff because I've used AI and AI can only do so good and knowing if something is foldable or not. So thanks for following along. Happy blazing.