(upbeat music) Okay, to use the sharp knives inside of Blaze, it is incredibly helpful to have an understanding of how Blaze works fundamentally. So I wanna try something. I wanna build a toy version of Blaze with you right now that actually works. It's gonna be simple, a simplified watered down version of Blaze itself, but it'll have the same fundamental mechanics.

of Blaze itself, but it'll have the same fundamental mechanics. And if you follow along with this, and I promise it will be enjoyable, if you follow along with it, by the end of it, you will understand how it works enough that when you have to make decisions about when to use what and when to use those sharp knives, you will know exactly how to use them, and you'll feel totally confident.

you will know exactly how to use them, and you'll feel totally confident. And you're gonna have fun. By the end of this, you're gonna feel like you can do anything you want with Blade. Like you're gonna have all your own ideas, I'm sure, of ways that you can use and abuse Blade on a deep level. So let's do it. So this is our editor setup.

So let's do it. So this is our editor setup. We have a service provider right here for the app. Over here, I have that benchmark Blade file that we've been using as a little playground, and then I have its compiled Blade file right below it, or its compiled PHP file like we saw in the last episode. So I can render it in the browser. It says hello world, and we have that whole thing. But what I wanna do is like if I say hello world food

It says hello world, and we have that whole thing. But what I wanna do is like if I say hello world food or something like that, I have to go here and I have to run it for it to then change the compiled file 'cause that's to recompile it. So I made this little script PHP artisan compile or render. I have both of them, let's do render. PHP artisan render, and now every time one of these files changes, so if I save this file, it's going to automatically render the file

changes, so if I save this file, it's going to automatically render the file so that we can just, let's get this back to normal. This is that got crazy. Wow, VS code. All right, so if I get rid of this and then I save it, you'll see it's automatically going to run it in the background and change this compiled file. It's just gonna make our setup really nice. All right, so what is our goal here?

It's just gonna make our setup really nice. All right, so what is our goal here? Our goal here is to take something like X button. I'm just gonna save this and show you. Remember, this is why blade is slow. Look at all this stuff. What I wanna do is basically sit in between where blade takes this input and turns it into this output, and I wanna intercept it. And I wanna say this is our goal post for this episode.

and I wanna intercept it. And I wanna say this is our goal post for this episode. I wanna replace anytime we see a blade component. I wanna replace it with like foo bar or something, okay? That's our goal. And this will show us how to get into the plumbing of blade and then we can do more real stuff in the future episodes. All right, so let's clean up the service provider as much as possible just so that we have this really clean starting point.

as much as possible just so that we have this really clean starting point. Now everything hinges around this single hook in blade that you probably weren't aware existed. Precompiles are prepare strings for compilation using. And you pass a callback like this and you get a variable. Can you guess what is inside this variable if we DD input right here? Can you guess? Now we refresh and check that out.

Can you guess? Now we refresh and check that out. It's the string that blade is gonna compile. It's saying prepare strings for compilation. So when it goes to compile this file, it takes the whole string contents of it and it passes it to a callback, right? So now we have access to all the string contents of that file. Now what happens if I just return foo like this, okay?

of that file. Now what happens if I just return foo like this, okay? I save it, check it out. It intercepted the whole thing and it returned foo. This is like a middleware. So by the time that blade got to it, all of the contents were just foo. It wasn't X button at all. Does this make sense? So what we can do here is we can mutate input

Does this make sense? So what we can do here is we can mutate input to our hearts content and then return it and we are standing right in between the input file and the output file and we can do things like match for a tag expression and replace it with our own stuff. So let's do that. We're almost there. We're gonna use preg replace callback. I don't know if you're familiar with this in PHP.

We're gonna use preg replace callback. I don't know if you're familiar with this in PHP. It's a really, really handy thing. Preg replace callback, okay? And what you do is you pass in some sort of pattern like this, then a callback that gets all the matches, all the reg X matches like this. And then the third parameter is the input string that goes into it, okay? And then we can return these results directly, okay?

that goes into it, okay? And then we can return these results directly, okay? So the pattern we wanna match for now is like, let me just match Xba, I guess, okay? And then here we're gonna return foo, okay? And now I'm gonna save it and now take a look. It replaced Xba with foo. So now it's futon, things are getting crazy. Okay, so now we replaced it, it echoed it out as futon, right? So let's do X button, but we'll add in these

Okay, so now we replaced it, it echoed it out as futon, right? So let's do X button, but we'll add in these and everything like this, okay? And we need to escape that. And now we did it. We've replaced X button with foo. We'll take it one step further. We don't wanna explicitly match the word button. We wanna match a wildcard expression. And I'm gonna give it a name as well called name

We wanna match a wildcard expression. And I'm gonna give it a name as well called name so that we can do this. We can say matches, name like that. Like if I did this just to show you what this is about and load it, there we go. So we know that this is a button. So that's useful as we can, like now we have the component name and then I could return, I don't know, name.

like now we have the component name and then I could return, I don't know, name. I don't even know what I'm doing. I'm gonna put hyphens around it. Well, that's what we're gonna do, okay? Save that and there we go. We took our tag component with button. We replaced it with just hyphens or something. But the point of this is to show you how to hook into blade and basically get kind of set up here.

But the point of this is to show you how to hook into blade and basically get kind of set up here. So in the future, we're gonna do crazy things with this. Like compile this ourselves and replace all that blade expensive stuff with simple require statements and things. So let's do that. I'll see you in the next video.