In the last video, we got the response working, so now when we hit this button, we send a request, we get a response back, it has everything we need, the new HTML, the new snapshot. So let's take this information and actually do something with it in JavaScript. So here's our welcome.blade.php and all the JavaScript we have so far. Before we do stuff with this data coming back from the server, I want to refactor this whole bit so that it's a little bit nicer, pull it out into a separate file kind of thing. So let's do that. We're going to add a script tag and we're going to reference a new file called livewire.js and then we can take all of this stuff and we're going to put it inside of that file. Okay, so let's do that.

and then we can take all of this stuff and we're going to put it inside of that file. Okay, so let's do that. Let's open up our public folder and this is where we put assets and we're just going to create a new file. This is going to be called livewire.js and then we're going to paste in all the JavaScript from before. Okay, so this should still work just like it did before. We hit the plus, it sends out an AJAX request, whatever, you can't see it. Okay, so now we can just focus on refactoring this to be a little bit cleaner. Let's extract out some methods.

Okay, so now we can just focus on refactoring this to be a little bit cleaner. Let's extract out some methods. The first one that I want to do, this is fine, we get all the elements, we get the snapshots. Now let's extract this whole bit into a dedicated function and we're going to call this initWireClick because that's what it's doing because we're also going to want to handle other things later. So let's do that function initWireClick and then we'll pass in the root element of the Livewire component. Okay, so let's do that. We get all of this, we paste it in here and this looks all well and good but there's one

Okay, so let's do that. We get all of this, we paste it in here and this looks all well and good but there's one thing that all this code uses that we don't have access to anymore and that is the snapshot. So we could pass in the snapshot along with the element but there's something that I would actually rather do. Instead of just storing this in a variable called snapshot, I would rather store it on the root element itself in a variable called __livewire. So you might ask, maybe there's a few things I need to clarify. The first thing is, what? You can just add properties to elements and that is correct.

So you can use that to store your own data on DOM elements. But it's a little bit, I don't know, you don't see it all the time because there's gotchas involved. Like you don't just want to set, I don't know, maybe you have a variable that you don't think collides but you set value and value is something that the browser already uses. So when I'm doing this, I generally set __ that says, hey, I don't want to conflict with anything that's built into the browser, I just want my own bit of data. So I'm going to set __ and then say that, hey, this is from Livewire. So if somebody is looking inside of their console and they see it, they're going to see that.

So if somebody is looking inside of their console and they see it, they're going to see that. And I'm going to tell you, this is actually in Livewire. Any root element of an actual Livewire component has __livewire on it. And it stores, I think you actually, to access the full thing, you have to do this. But this is a little key here. If you access this on a root element of any Livewire component, you have the keys to the kingdom. You have access to the snapshot, you have all the data, all the HTML, you have all the methods on it that you would need to call.

You have access to the snapshot, you have all the data, all the HTML, you have all the methods on it that you would need to call. So that's just a little tidbit there. So let's do that. Let's set the snapshot as L.__livewire. And now in here, we can say let snapshot equals L.__livewire and we'll put this right next to the method. Okay, so now we have access to the snapshot and the method from inside a NetWire click. And this is okay. But like I said, we're going to add other things like wire:model and things later.

And this is okay. But like I said, we're going to add other things like wire:model and things later. So let's extract out another method. Let's take this whole fetch and put it into its own method called sendRequest, where we pass in yet again, the element. And we don't actually need the snapshot inside of there. So we'll put the snapshot inside of here because we use it right here, not anywhere else. And then we can call this method sendRequest and pass in the element. And that's that. We would also need to pass in the method.

And that's that. We would also need to pass in the method. But we're not always sending a method there's, you know, again, we're going to do wire:model later, there's times where we're not just sending a method. So I think a cooler thing to do is to basically send an object that will automatically get merged with the object that goes to the server so that you can put anything in here you want. Like I could take this call method, and I can put it directly here. And now we can accept a second parameter, let's say, addToPayload, I'm just going to call it what it is. And then we can put that object directly inside this object.

We send this fetch request with all the data. Let's do something with the response. To do that with fetch, the fetch API, like I said, is not the prettiest thing in the world. So there's a few little steps we have to go through to get the JSON out of it, we have to do this .then() and .json(), whatever, because this returns a Promise that we then have to get the data out of that Promise when it resolves and rescue the JSON from it and it's its own Promise. So we have to add another .then(), but whatever, you don't worry about any of this stuff. If you're going to use fetch, you're going to look on Stack Overflow anyway, and find

Perfect. Exactly what we want. All right, now we want the HTML and the snapshot out of that. So let's use some more fancy JavaScript syntax, more object destructuring, HTML and snapshot. We want those new variables created from this response object. And we can do that like that. Okay. Now the first thing we want to do is replace the stored snapshot with the new one from the server. So this L.livewire, we want to replace this with the new snapshot.

the server. So this Livewire, we want to replace this with the new snapshot. So now that snapshot will always be up to date. And now here's the bit. Here's the fun part. Here's where we turn this into actual working Livewire. We take the HTML and we replace the current HTML on the page in the component with that HTML. So let's do this. I'm just going to show you briefly.

So let's do this. I'm just going to show you briefly. If I take this div, this wire snapshot, and I get it inside the console, and now I call innerHTML, I can set the innerHTML to anything I want. Like a misspelled hay. And there, it just replaced it. So naturally, I could say L, now remember, L is the root element of the component. I can say innerHTML equals HTML. And let's check this out. There it is.

One, two, three, four, five, six, seven. So check that out. Here is Livewire. We have a working version of Livewire. Now this is problematic, I will say. This is, I guess it works, and it works mostly the way Livewire actually works. But if we open up our component here, and we add more interesting things to the component, let's say you have an input inside your component. And you type inside that, and then you hit this plus, okay, the input just got wiped out.

And you type inside that, and then you hit this plus, okay, the input just got wiped out. Because we're setting innerHTML, we're wiping out all of the HTML, all of the DOM elements, with brand new ones from the server. So any state you had in there, any inputs that you had filled out, or any event listeners you had on any DOM elements, those all get destroyed and completely replaced. So we need to do something more intelligent. Rather than replacing the HTML, we need to morph the current HTML into the new HTML. Now this is a big concept that is super important to understanding when you're working with Livewire.

Now this is a big concept that is super important to understanding when you're working with Livewire. It's just a really important concept that if you understand it at a fundamental level, it will really, really help you as a Livewire developer. So let's run with that. In the next video, let's learn about morphing and make our Livewire machine actually morph the HTML. I'll see you there.