we have some common ground based around all the things we've built and we can now make draw lines between what we've built in the common ground that we share right now mentally and we can look at how those map to real Livewire. And then hopefully you can take that knowledge away and when you're using real Livewire, you have a much better idea of how things work. Okay. So here's our Livewire uncovered repository right here in VS Code. I am going to copy this entire folder into a new folder called Livewire uncovered

am going to copy this entire folder into a new folder called LivewireUncovered to compare. Okay, let's do that. All right. I failed at being able to run the cp command. Okay, because we're copying the current directory and we're going to copy it to sibling directory called livewireUncovered compare. Okay takes a second because there's a zillion files and let's check this out. So we duplicate this tab. And now this is going to be LivewireUncovered compare.

out. So we duplicate this tab. And now this is going to be Livewire uncovered compare. Okay. So let's see. If both of these things work we hit add to do that works we had add to do and this works cool. Let's open up the Livewire One in VS Code. So Livewire uncovered compare. Okay. So we have this open in VS Code now and let's convert this to actual Livewire because right now it's just our custom Livewire.

So we have this open in VS Code now and let's convert this to actual Livewire because right now it's just our custom Livewire. All right. So this script tag, let's get rid of that and we'll swap that with Livewire Scripts. This @livewire I think this actually will work. So let's just leave that and let's remove our own blade directive and it should just fall back to Livewire's blade directive and then the last little bit here in toDo's would be to extend Component that comes from Livewire. Okay, so we should actually be good.

be to extend component that comes from Livewire. Okay, so we should actually be good to go. Now. We've converted everything back to Livewire. So if I hit add to do totally works and let's verify that it's real Livewire by just looking at some differences in the HTML we can see that it's definitely actual Livewire. Okay. So this is pretty cool. We have two projects. Now one is one is actual Livewire and one is the Livewire that we've built. So let's compare the two let's first just look at what we see when we open up the dev

built. So let's compare the two let's first just look at what we see when we open up the dev tools and look at this HTML. So here's the HTML of what we've built remember we have this wire:snaptshot with all the snapshot stuff the class that it is all the data the checksum and yeah, and that's that and then our Livewire JavaScript. Let's look at real Livewire. All right, so it's a little bit different first thing you'll notice is there is no wire:snaptshot or any of that data inside of here and that's because

first thing you'll notice is there is no wire:snapshot or any of that data inside of here and that's because Livewire's JavaScript when it extracts that data, it actually removes the attribute. So if we we could disable JavaScript, maybe let's do that. Let's disable JavaScript and then refresh. Okay. So now there was no JavaScript to rip it out and now we can see it in its full form. So we have wire:id. That's a concept that we never even touched on but it's important for nesting Livewire components, which we didn't even touch because it's not

that we never even touched on but it's important for nesting Livewire components, which we didn't even touch because it's not I don't know. It's not necessary information when using Livewire and it's extremely complex. So why are colon initial data is the equivalent of wire: snapshot and you'll notice that it's got a lot of the same stuff. The name of the component is toDo a bunch of extra information and then check some we see there some other data and yeah, so the snapshots look pretty similar. They're

then check some we see there some other data and yeah, so the snapshots look pretty similar. They're both embedded in this root HTML. So let's go into the console and remember if we do __. Whoops. Not that okay. Maybe we will clear. We'll say __Livewire and then this is everything in that class our Checksum class dataMana, okay. And then let's do the same over here in real Livewire. And that didn't work because we must not have selected that oh because we disabled JavaScript enable JavaScript.

a collection. It's a little bit of a different schema. We have collections and then we have a key of any objects that our Collections and that's to Do's so you can see that there's a lot of the same stuff. Now, let's look at a network request with our Livewire and then real Livewire so let's say Hey you let's refresh this so that it's we're starting from the same place. Let's just add toDo some toDo, okay. Refresh this one and add toDo. All right, so our own version of Livewire what we send to the server is pretty basic. We give it the snapshot that has all the

so our own version of Livewire what we send to the server is pretty basic. We give it the snapshot that has all the data and then we say callMethod. And then what we get back is the snapshot but then some newly rendered HTML and that's essentially what we have in real Livewire just with some different names and a little extra stuff. So what goes to the server is that fingerprint that I mentioned all that information about the component which in this case, we just have class inside the snapshot. We're in real Livewire there's no class. Like I said, it's the

case, we just have class inside the snapshot. We're in real life where there's no class. Like I said, it's the name of the component and then a bunch of other information. And then serverMemo which is the snapshot that has the checksum. It has the data just like the other one does and it has dataMeta just like the other one does and some other things that aren't being used right now. And then updates here and that's the list of all the updates because you can call multiple methods in real Livewire you could set data in column method in the same request and we

all the updates because you can call multiple methods in Livewire you could set data in column method in the same request and we have we're saying call method and the payload is addToDo and then an empty parameters list. So this is essentially the same thing the schema is just a little bit different and there's a lot of other little features and let's look at what comes back the new snapshot and notice that there is no data meta here because in Livewire Livewire intelligently takes a diff of the snapshot and any data that comes to

Livewire, but we won't get into it. There's a snapshot and then there's things that we do in the response comes back and the most important one is swapping in the new HTML, so that is the schema of actual Livewire. Now. You've seen the differences in practice. That's it. Like we have pretty much the same setup just different names for things. Let's let's source dive Livewire, but I think this does conclude the part where I show you the differences between what we've built and

but I think this does conclude the part where I show you the differences between what we've built and what is actual live where you should see now that they're very very close. They're very analogous and all the things that you understand from before they carry over to actual Livewire now, I'd like to show you the internals of Livewire and just kind of make references to our Livewire God class. So we have that livewire.php here. Right, and this does a lot we initially render

we have that livewire.php here. Right, and this does a lot we initially render a component. We have two Snapshot we have from snapshot. We have all of this stuff generating checksums hydrating properties all of this stuff. I want to show you where all this stuff exists in actual Livewire core. Okay, so the place to start whenever your source diving Livewire everything in Livewire's core starts with LivewireServiceProvider everything. So this

away right now. Just like how I open the series just ride this wave kind of go along with it. Don't try to you know stress out too much about understanding every bit. But yeah, everything in Livewire starts here, even the the Livewire Blade, you know, when you do livewire and then passing a component like we do we scroll down we have register Blade directives. We can go there and then here's Blade directive Livewire and we can go into that Blade directive find the Livewire method. And then this is the actual implementation of livewire's Blade

into that Blade directive find the Livewire method. And then this is the actual implementation of Livewire's Blade directive and if we scroll down it's a lot more complicated, but there is this Livewire::mount where we pass in whatever we passed in the class or the component name and then it spits out the HTML so we can find that Livewire::mount this Livewire facade that exists anytime you use the Livewire facade, which I don't think you do very much in normal life where it's pointing to this LivewireManager class. And

use the Livewire facade, which I don't think you do very much in normal life where it's pointing to this Livewire manager class. And then let's look at the mount method and we do a bunch of stuff we get we basically we get the name of the component. We have the name now and then there's this Livewire lifecycle manager where we say fromInitialRequest. Now, this is the same thing as like, what did we have in our Livewire class here? We had initialRender. So instead of initialRender, it's fromInitialRequest. Then we do a bunch of stuff. We boot we do some hydrating we

So instead of initial render, it's from initial request. Then we do a bunch of stuff. We boot we do some hydrating we mount it. We render it to a view we call that, you know render method we dehydrate it and then we say initial response and return it out into the HTML. So, you know, you don't have to understand every bit here but these words now you understand a lot more about them initial requests and initial responses, hydrating, dehydrating, rendering, mounting all that stuff. So let's look in this

responses hydrating dehydrating rendering mounting all that stuff. So let's look in this LifecycleManager and you'll see that this most closely matches the Livewire class that we created. You'll see a lot of the same stuff from subsequent request, which is the equivalent of from snapshot kind of thing from initial request and you'll see a lot of similar stuff here like it constructs a new request that has a fingerprint and updates and serve from memo that Snapshot from initial instance. Yeah again

has a fingerprint and updates and serve from memo that Snapshot from initial instance. Yeah again register hydration. Okay, there's all this stuff boot hydrate. Initial hydrate and then mount this is a little bit beefier. This is something where we actually take the component and we run through and you'll see right here assign all public component properties that have matching parameters. We're looping through get the public properties defined by the subclass We're looping through and we're

We're looping through get the public properties defined by the subclass We're looping through and we're setting those properties and then check this out if method exists mount then call the mount method. This is the exact same kind of thing as if method exists mount right there. Okay, so that's it. And then there's a bunch of these initial dehydrate dehydrate whatever all this stuff and that's it. This is the equivalent of our Livewire Component class. So you probably understand a lot of those references now,

it. This is the equivalent of our Livewire class. So you probably understand a lot of those references now, but I will say that not a lot happens here. This just kind of coerces other code to run. So let's get back to this Livewire service provider because this is always the starting point like in a Laravel app. The routes file is where everything starts from you know, like if you want to understand a Laravel app you start with the routes file with Livewire's core. It's all the service provider it all starts with the service provider. Now there's a method in here

wires core. It's all the service provider it all starts with the service provider. Now there's a method in here called register hydration middleware. And this is like the beating heart of Livewire. This should this is where all the features kind of happen and I tried to make it as pleasant to source dive as possible and show you that our request coming to the server goes down this stack and hits all of these classes and then before it goes out back to the server or back to the front end it goes back through

checksum. Then this one normalized server memo Sans data, whatever the names are a little verbose. But essentially it's like we have to normalize the data for JavaScript before the data goes out to the server remember because we don't want those checksum errors because JavaScript messes with our data. Let's see some other stuff hydrate public properties. We set all the public properties on a component call lifecycle hooks.

public properties on a component call lifecycle hooks. And this is the updating perform data binding. This would be wire:model action calls calling methods events rendering to view. Yeah. So again, this is the Beating Heart of Livewire a great place to start when you're source diving and then the other place to look at basically, so there's two really important things about the core this method here this registerHydration middleware and then also this method registerFeatures. So

core this method here this register hydration middleware and then also this method register features. So a lot of features get put in here, like let's say support support file downloads. Let's take a look at that. support file downloads. So it's basically just a big function this constructor that does some code and you'll notice that the way I do things internally with Livewire is I dispatch these little events. So component.dehydrate subsequent

Livewire is I dispatch these little events. So component.dehydrate subsequent basically. Okay. This is a tough thing to explain but I'm going to run through it briefly. We're saying Hey, listen for this Livewire internal event action.returned which is a method. So anytime a method is called we're listening for its return and then we're getting it right here the method that we call the thing that was returned. Then we can basically crunch all that information and store it on this class.

that was returned. Then we can basically crunch all that information and store it on this class right here by downloads by ID to store. So we're basically trying to check if somebody returned a file download from a method in Livewire. Then later on we're listening for. Hey, are you dehydrating a component for a subsequent request then take this download and stick it inside the response that's going to go to the front end and that's it. So, I don't know if that made any sense to you at all. But you'll notice that all of

amused but I really hope that you've now gained a true fundamental understanding like a visceral understanding of Livewire and how fundamentally it works with its request life cycles and hydrating and dehydrating securing things with the checksum the whole process how it works fundamentally if I have it set it before and this is so valuable to me that the people using the tool have this understanding because it does pure magic at first and that's fun and games until you hit some little issue and then