So, in the last video, we got our Livewire component rendering, which is awesome. And in this one, I just want to clean this up a little bit and set a good foundation for the rest of this series. So right now, we have a bunch of php kind of just smattered throughout this blade view, which worked for the video, but we need to graduate to something a little more official, I think. And then this also doesn't look amazing. I think we can clean that up. So that's our goal here. The first thing we're going to do is take these functions and put them inside of a class.

So that's our goal here. The first thing we're going to do is take these functions and put them inside of a class. So my goal for this, because Livewire has both a PHP side and a JavaScript side, I don't want you to have to keep track of, you already will have to keep track of two different languages, but I don't want you to have to keep track of a zillion files. So we're going to have two God classes, there's going to be, or God files, I guess. For PHP, we're going to create a file, we're going to call it Livewire.php inside the app folder. And then when we get to JavaScript, we'll have a Livewire.js file. And I'm going to try to keep all of the Livewire code inside of these two files, so that you

And then when we get to JavaScript, we'll have a Livewire.js file. And I'm going to try to keep all of the Livewire code inside of these two files, so that you don't have to, you know, I don't know, be spinning your head all the time. So let's take this Livewire class, and we're going to turn it into a class at our PHP namespace is going to be app. Okay. And then pretty simple class called Livewire. And that's it. Just a simple, simple class. And we're going to be good with that.

Just a simple, simple class. And we're going to be good with that. Now let's open that up in a new tab. Okay, now these functions, I'm going to transplant directly inside of this class. And I'm not going to add public because I don't know, you don't need to, it's implied that it's public if you're going to make them public functions. So we'll just make them functions for now. And there we go, we have this stuff, we have to kind of adapt it to the class context. So we have to import some namespaces, this blade, we need to import ReflectionClass, we need to import ReflectionProperty, we need to import, okay.

So we have to import some namespaces, this Blade, we need to import ReflectionClass, we need to import ReflectionProperty, we need to import, okay. And then also this getProperties, we need to add the $this arrow, because we're inside of a class now. And that's a method on the class. Okay, so we've adapted this to the class, we have our Livewire God class all set up. Now here, we need to reference that instead of just this plain Livewire function, let's say new app\Livewire. And then we'll call, you know, we could just call Livewire. And that's fine, I suppose.

And then we'll call, you know, we could just call Livewire. And that's fine, I suppose. But I think now it's not a great name. Because what does Livewire mean? Well, we're actually rendering it for the first time. So I'm going to call it initialRender. Because remember, in Livewire, there's the first render on the page. And then when you do something, there's going to be more renders later on, and those will be subsequent renders. So I'm just going to call this initialRender.

be subsequent render. So I'm just going to call this initialRender. And that's what our method name will be. And then you pass in the class and this should work. So let's render it. Great. Everything works. We've extracted a bunch into this Livewire class. Now this looks even worse. We have all this stuff spewed on the page in a plain raw echo.

Now this looks even worse. We have all this stuff spewed on the page in a plain raw echo. And to clean this up a little bit, let's turn this into a Blade directive called Livewire, where we can just pass in the class like so and then we can get rid of this. Okay, so this is our goal. And to do this, we're going to have to register a custom Blade directive. So let's do that inside of our routes file. This is our routes file with our single view. It's super simple right now. Now you wouldn't normally register a custom Blade directive in here.

It's super simple right now. Now you wouldn't normally register a custom Blade directive in here. I'm doing it because I'm trying to keep as few files in use as possible or in play. So in php, we're going to be using this routes file, we're going to use this blade view. And then we're also going to use our Livewire God file. And that's it just those three files, I think for probably the whole course, I think we're just going to use those three files. So in here, let's say blade directive, and this is how you register a custom directive in Laravel, we're going to call it Livewire, and then pass a callback that accepts an expression. And now what is this expression?

in Laravel, we're going to call it Livewire, and then pass a callback that accepts an expression. And now what is this expression? This expression is a string of whatever you put inside of the parentheses for your custom Blade directive. So let me dd that for you, it's a dd out expression, just so you can see exactly what it is. And refresh this page. Okay, so now we have app/Http/Livewire/Counter.php. So that's just a string of what we passed in here, we could pass in anything, just random whatever, and it'll come through right there. Okay, so it's our job to turn something like this into now we had, we had this Blade syntax,

whatever, and it'll come through right there. Okay, so it's our job to turn something like this into now we had, we had this Blade syntax, you can't take a Blade, unfortunately, it would be kind of fun if we could turn this into, you know, exactly what we had like this. And then, you know, use php concatenation to concatenate in the expression, you know, with new Livewire, whatever, we can't do that, we have to actually put raw PHP in here. Because this is already Blade, we can't put Blade inside of Blade, whatever, we need to put raw PHP, kind of like this, you know, those actual raw PHP tags. So I'm just going to adapt this, this is essentially opening PHP, and typing echo, and then closing PHP.

So I'm just going to adapt this, this is essentially opening php, and typing echo, and then closing php. That's what this does. And that's what we're going to do. So we just have to do that by hand. Don't get confused about that. Okay, so we'll use double quotes here as well. So we can put some strings inside of strings. Alright, so we're opening php, we type echo. And now we want to do that new app Livewire.

Alright, so we're opening php, we type echo. And now we want to do that new app Livewire. And this is our God class. And then we have that method called initialRender. And then for that method, remember, we're passing in the class right here. So we want to take those innards and pass them in here. And we can do that with string interpolation expression, okay. Now let's refresh the page and see if it worked. Great. It totally worked.

Great. It totally worked. And just to kind of reiterate this and give you a quick lesson in custom Blade directives. I'm not trying to spin your head. But when php needs to evaluate a .blade.php file, and this is a blade file, this isn't actual php, this is custom syntax that Laravel interprets. But somewhere there has to be an actual blade file that php interprets. So every time you render a file in Laravel, Laravel will take a blade file, and it will convert it into a php file and actually store it inside your application. So it's inside storage/framework/views.

convert it into a PHP file and actually store it inside your application. So it's inside storage, framework/views. And here are the cache, they're called view cache files. And we can look at them. There's a few. Okay, this is the one we want. This is it. So this is what Laravel actually converts our @livewire into just like we wrote @php, or sorry, php, open PHP, echo, new app\Livewire\InitialRender, and then what we passed into it hard coded, it passes directly into there.

php, or sorry, php, open php, echo, new app, Livewire, initial render, and then what we passed into it hard coded, it passes directly into there. So I don't know if that clears it up for you and makes it a little bit easier to track. And then Laravel also specifies the actual Blade file that this came from. And this is why sometimes it's helpful to do php artisan view:clear. If you change a Blade directive, which now it deleted all of these views, all of the view caches are now deleted. And then if we refresh the page, it'll recast those files. So I don't know just a little quick deep dive for you. But I'm pretty happy with this, we have our nice little @livewire.

So I don't know just a little quick deep dive for you. But I'm pretty happy with this, we have our nice little Livewire. And then our Livewire God file here, this Livewire class. And we're going to keep everything isolated to here and here and then our routes file. So I'm happy. I think this is a good foundation to move forward. Now let's get into some JavaScript stuff. And we'll tackle that in the next video.