Alright, so we have the beginnings of our Livewire framework set up. We have this initial render where we take a Livewire component and we figure it out and render it with Blade and put it on the page, exactly what we want. And so the first render looks perfectly fine. Now, of course, this is just the beginning of what we need. Our end goal is that when we click this plus, an AJAX request gets sent to the server with all the data about this component so that the server can recreate that component on the server side, do something to it, render the HTML, spit it back out to the front end, and then our JavaScript that we eventually write will swap in the zero with the number one, ideally.

and then our JavaScript that we eventually write will swap in the 0 with the 1, ideally. That's the goal. So in order to get that JavaScript stuff set up, we need a snapshot of this component. This is a concept that I talked about, I think, in two videos ago about hydrating and dehydrating, whatever. So the word we're going to use is snapshot, where you have some class in PHP on the server. So let's take a look at the actual counter, right? So this counter here, we have data about it that can be ever changing because it's Livewire. We have the class name.

So this counter here, we have data about it that can be ever changing because it's Livewire. We have the class name. That's information that we're going to need in the future on the server. And so we're going to call it taking a snapshot of a component where we boil a component down to its data and the class that it is. We'll add some more stuff later. And then we have that snapshot in JavaScript. Then we can pass it back to the server. So that's going to be the focus of this video is getting the snapshot into JavaScript, basically embedding it in this HTML and then writing JavaScript that strips it out.

So that's going to be the focus of this video is getting the snapshot into JavaScript, basically embedding it in this HTML and then writing JavaScript that strips it out. So that's where we're headed. So let me just write out where we're headed so that we kind of get like a clear head here. Okay. So right now, this is kind of like what renders on the page when we call Livewire. Now actual Livewire, the actual tool has this thing called wire:initial-data. And then inside of it, all the information about it. The only thing we're going to change, we're going to call this snapshot because I want to stick with the name.

The only thing we're going to change, we're going to call this snapshot because I want to stick with the name. I want to keep it clear. And we're going to diverge from the actual official Livewire because I just want to use clear names and simple things to keep our head on straight. But this will be similar. So here we'll have something like class is equal to app/Http. Of course, this will be in a string or whatever. Yep. So app/Http, our counter, and then we'll have this data that'll be count zero.

Yep. So app/Http, our counter, and then we'll have this data that'll be count zero. And then we can write some JavaScript. I'm just going to write out this pseudocode right now that'll be like, find all elements with wire:snapshot. And then it's like, go through each, pull out the string of data, turn that string into an actual JavaScript, whoops, into an actual JavaScript object. Right. And then, you know, so that's what we're trying to do here. Okay.

And then, you know, so that's what we're trying to do here. Okay. So the first thing we need to do is get this, this snapshot stuff going, and this is all going to be on php side. Then we can do the JavaScript to do all that JavaScript side. Okay. So that's where we want to head. All right. So let's open up our God class, our Livewire .php God file. I keep saying this God word, it's just like a programming term, God classes for, for files.

So let's open up our God class, our Livewire .php God file. I keep saying this God word, it's just like a programming term, God classes for, for files that just like do too much and take care of everything. And that's kind of intentional here. All right. So this is our thing here. We want to get this wire:cone snapshot inside of this div. And here's this Livewire class where we have initialRender, and we're just returning the Blade right now, that HTML. So let's put that in a variable.

blade right now, that HTML. So let's put that in a variable. And now we want to take the HTML and we want to inject a bit inside of it as an attribute. That's actually really difficult Livewire itself does that. But it's not easy. You have to write a ton of regex to find opening brackets and before closing ones and your root element and whatever. It's a little gnarly. So we're going to do something way simpler. We're just going to wrap this up in a separate div that has that attribute hard coded on.

So we're going to do something way simpler. We're just going to wrap this up in a separate div that has that attribute hard coded on it. So check this out. Let's do this. Let's do HTML. Okay. This is a php heredoc syntax. It's a way to write strings, but make them multiline. And if you call them HTML, that this could be any arbitrary name.

It's a way to write strings, but make them multiline. And if you call them HTML, that this could be any arbitrary name. You could do that and it would work. But if you call it HTML, you'll get the nice syntax highlighting. Like watch if I change this to blade or something else. Okay. blade actually works because that's, you know, we have that set up in our, our editor, but whatever. I'm just calling it HTML and we're going to create this div. Okay.

I'm just calling it HTML and we're going to create this div. Okay. And on it, I'll say wire:snapshot equals .... And then inside of it this is just kind of the way in php. If we were to return a double quoted string, we could say, "Hey there." And then if we had a variable called name or something, we could inject it like this. That's called string interpolation, where you're basically stitching variables inside of string literals there. And we're just doing the same thing. It's the same syntax.

And we're just doing the same thing. It's the same syntax. And then we're going to pass our HTML. So we're taking all the HTML that we had before, and we're injecting it inside of a new div where we have this wire:snapshot. Okay. So there it is. The indentation is wonky, but whatever. div wire:snapshot, and then we have our new component inside of it. And then our closing div for our snapshot.

Div wire:snapshot, and then we have our new component inside of it. And then our closing div for our snapshot. Okay. So that's pretty good. Next step is this snapshot. What do we put inside of here? We need to get our php stuff and get it into something that we can put inside of HTML, JSON. That's what we're going to do. So you'll see that.

That's what we're going to do. So you'll see that. So let's create this snapshot object here, this php object. And remember there's two bits we need for it. There's the class, and we can use getClass component. Okay. There's the class. And then there's also the data associated with that component that we also use to render the Blade. If you remember, this getProperties is going to get all the data that are the public properties.

the blade. If you remember, this getProperties is going to get all the data that are the public properties. We have class, and then we have data. And that's our snapshot. Perfect. So now I want to get the snapshot and inject it into here. So let's see what happens if we just put it in there. snapshot. Okay. All right.

Okay. All right. We get an exception. Array to string conversion. Because we can't just put an array inside of a string. We need to turn it into JSON first. So let's do that. Let's call it snapshot attribute, because this is an HTML attribute. And this is going to be json_encode(snapshot). So this is a really handy function inside of PHP, where you can turn any PHP variable

And this is going to be json_encode snapshot. So this is a really handy function inside of php, where you can turn any $variable into a JSON string. And then in JavaScript, you can get it out. And I'll show you that in a second. Okay. We're still getting an error because we didn't do... Okay. snapshot attribute. Perfect.

Snapshot attribute. Perfect. So check this out. Now we have this JSON directly inside of this attribute. So I just copied this. I just command seed. Okay. Now let's open up a console. And in JavaScript, there's an alternate method called JSON.parse that we could pass in a bunch of JSON.

This is a great way to get data from php to JavaScript without sending a whole network request. You're just kind of hard coding it in there. Great. So this is almost there. There's one problem with it though. Look how these double quotes are right here. HTML or sorry, Chrome, any browser thinks that this is one attribute. While your snapshot is an opening bracket and then it's like class and it just gets totally confused.

While your snapshot is an opening bracket and then it's like class and it just gets totally confused. So we need to wrap this json_encode in an HTML entities. Now this is another php function that's available. If I can type it, that's available to escape stuff, to turn those quotes into these & quotes so that in our HTML here, if we take a look, look at the HTML. Now we have, see, it's going to render it all nice and pretty like, and that's exactly what we want. Great. So we're doing pretty well there.

Great. So we're doing pretty well there. We have our snapshot and we put our snapshot into the HTML and now we can write some JavaScript that is going to get it out of the HTML. So let's do that. Here's our big Blade file and here's our just kind of pseudocode or comments about what we want to do. And let's just do it. So the first thing is we want to use JavaScript to find all the elements on the page with this wire:con:snapshot attribute.

So the first thing is we want to use JavaScript to find all the elements on the page with this wire:snapshot attribute. We do that with document.querySelectorAll and document.querySelectorAll you basically you pass in a CSS selector and it will find all the elements that match that and return them to you so that you can do something like forEach and loop through them in a function and then get all of those elements. Now we only have one for now, but we're going to build it as if we can handle multiple. So document.querySelectorAll, and we're going to look for all of the attributes that have wire:snapshot. Now I've done this before and I just know that it's going to say invalid selector.

have wire:snapshot. Now I've done this before and I just know that it's going to say invalid selector. We have to double escape this colon. I'm sorry, I don't know exactly why, but whatever, that's what has to be done. And then let's do this. Let's console.log l. All right. Now refresh our page. Look at the console and check this out. We looked for every element that has wire:snapshot on it and looped through them and console logged them.

We looked for every element that has wire:snapshot on it and looped through them and console.logged them. And there it is. That's our element. And if we refresh, there's a snapshot. There's our script. This is great. All right. So the next step is we want to get the data from that wire:snapshot attribute. So we can do that with element.getAttribute('wire:snapshot').

So the next step is we want to get the data from that wire snapshot attribute. So we can do that with _.get attribute wire. And now again, this is weird. JavaScript's annoying. We don't need the double escape here. It's just wire:snapshot. And then let's say let snapshot equals, okay. And then console.log(snapshot). And let's see what that is this time. Refresh.

And there it is. Check it out. Now we have our class and our data object. And this is all the information that we need to send back to the server when we do something. So that's a wrap. We have our snapshots all set up. It's in HTML. We've started the JavaScript journey for this Livewire framework. Now let's actually do something interesting with it. Let's take this data and let's send it to the server and get the ball rolling.