So up until this point we have dealt with our tight script in a couple of different ways. We have written it in line, we've put it in separate files and imported it just to clean things up. We have automatically generated it using the spotsy packages. And now I'm going to introduce you to one more methodology that you might wanna consider. Laravel has a new first party package called Laravel Wayfinder that automatically analyzes your app.

Laravel has a new first party package called Laravel Wayfinder that automatically analyzes your app. It pulls things out that the client may wanna know about and generates types script that you can import directly into your components. Now at the time of this recording, Wayfinder is still in beta, but I think the general shape of it will remain the same. Just keep in mind that some things may differ on final release.

Just keep in mind that some things may differ on final release. Let's dive in and take a look. So I've already installed the Wayfinder composer package. I've also installed the Wayfinder V plugin. This is just a plug and play way to get Wayfinder going in your app seamlessly. So you just add Wayfinder to your plugins list and specify any patterns if necessary that you'd like to watch.

and specify any patterns if necessary that you'd like to watch. So in this case, we're watching our routes, we're watching all of our app files and we're watching our ENV file for changes. Let's actually spin up our process and see what gets generated. So NPM Run dev, great, let's check it out. So I can see here we have new files

great, let's check it out. So I can see here we have new files and resource js wayfinder and we have a ton of stuff being generated and you can see that it follows the PHP namespace of your PHP files, which is pretty cool. And it just automatically analyze this and generated a TypeScript that's just ready to go for you. So I'm sort of interested in types. Let's see what's going on in here.

So I'm sort of interested in types. Let's see what's going on in here. So we have a ton of types here and namespace exactly as you namespace them in PHP just so you don't have to think about it when you go to import it. So we have our models, we have our events, we have our controllers with requests and responses. So it's done a lot of heavy lifting for you and it happens all automatically.

So it's done a lot of heavy lifting for you and it happens all automatically. So the first thing I would probably do is I would probably ignore this Wayfinder directory. And I would do that because I want this code base to be portable. We're writing a lot of local user paths so that you can click directly back into the PHP and that doesn't really become portable between systems and users.

and that doesn't really become portable between systems and users. So I think, uh, my recommendation at least is to ignore this resources JS wayfinder and that way you can just generate it fresh every time and it'll just work. Now let's see how this would actually work in practice. So we have our edit TSX and we have our manually generated props. Well, we can actually just get rid

and we have our manually generated props. Well, we can actually just get rid of these now we don't need 'em. Instead, let's import what Wayfinder has generated for us. So for the props, we want the inertia namespace pages. And you can see these are the existing pages that we have. Songs edit. And so what does that look like? Well, it's all the shared data, right? So it's all the shared data coming on the pipeline and it's that song with the app model song

So it's all the shared data coming on the pipeline and it's that song with the app model song and you can see that this is now a proper type that's being generated. Okay? So we still have all of our type safety here, but now it's just automatically generated for us as we go. Next up, let's deal with this. So we were manually creating this update form data. Let's actually just pull in what Wayfinder has generated. So let's go app, HGP,

Let's actually just pull in what Wayfinder has generated. So let's go app, HGP, just like on the PHP side controllers song controller. And this is the update method request. So here you can see this is what is generated, right? This is exactly what we had before. And that is coming from the validation coming from song requests, right? So if we add something to this, the rule is chill, hype or awesome, if I press save,

So if we add something to this, the rule is chill, hype or awesome, if I press save, it should get automatically reflected here and we don't have to do anything. We just have to write our PHP and the types script gets generated for us. So now that is fully and auto complete here. And then if we remove it and we say actually we don't want awesome anymore, well if we come back that'll light up red

and we say actually we don't want awesome anymore, well if we come back that'll light up red and say, Hey, awesome is no good. Awesome. There it is. Type awesome is not assignable to chill or hype. So it's gotta be one of those, which is pretty cool. You don't have to worry about your types anymore, just write your PHP, your types will happen automatically for you. Let's keep going. What else can we change here?

your types will happen automatically for you. Let's keep going. What else can we change here? We know about the broadcast channels and the broadcast data coming down. So let's actually replace some of this with some types script helpers that Wayfinder has created for us. So we can actually say broadcast channels from Wayfinder and songs. And so that will actually uh, generate this,

from Wayfinder and songs. And so that will actually uh, generate this, this particular string for us. For example, if we wanted to do this one, you would say broadcast channels, app models, user, and then you would pass in some sort of ID there. And what that would do is actually generate the string of the channel. So Wayfinder is more than just generating the types,

string of the channel. So Wayfinder is more than just generating the types, it's also generating some helpers to help you stay end to end type safe between your PHP and your type script. So let's back out and say songs again 'cause that's the channel we want. And then song added. Well we can actually do this and import the channel. So if you look, that's events song added and if you come in here, we have our broadcast events.

So if you look, that's events song added and if you come in here, we have our broadcast events. In this case we only have one B broadcast event. But if you had more, they would show up here and that way you can actually just import them directly. So if for example, we renamed this and said it's called now songs added, well your bundle just broke because that doesn't exist anymore, which is exactly the behavior that we want.

because that doesn't exist anymore, which is exactly the behavior that we want. We will want songs added, which is now available here and therefore available here. And now your bundle's back together. We want to know when there's a disconnect between the back end and the front end, right? What about this data? Well, we have app events, songs added and that's the data coming through. We have the song coming through

songs added and that's the data coming through. We have the song coming through and we have the socket, which you didn't even know about, but that is available to you coming down through the pipeline, right? Because Wayfinder picked up on that automatically and generated it for you. So for some reason you just tap into the socket, you can tap into it. Now as we change things on here,

socket, you can tap into it. Now as we change things on here, let's just say there's like a public bull active, right? So we're gonna pass another piece of data down that automatically just gets reflected here, right? We didn't have to do anything. The the process is running, you'd notice something changes, boom, it's in there. No problem. Another thing I wanna point out, when we were building Wayfinder, we wanted to reduce the use of what we call magic strings on the front end.

when we were building Wayfinder, we wanted to reduce the use of what we call magic strings on the front end. And magic strings are educated guesses about what has been defined on the backend. And these include things like routes, right? So we're kind of rewiring the mental model and saying, well, where is the PHP going? Forget the route name. Forget songs, song id, where is the PHP being process for this?

Forget songs, song id, where is the PHP being process for this? So let's, let's reroute our mental model. And instead of doing this, we say song controller generated by Wayfinder Update and pass in the song. Okay? And so what this gives us is an object with a method in A URL, right? So this reduces the use of magic strings. You just define it on the server and then it just gets autogenerated for the front end.

You just define it on the server and then it just gets autogenerated for the front end. Inertia has a new submit method and the submit method knows to look for wayfinder shaped objects. So now you don't care what the HTTP verb is and you don't care what the URL is, you just care that PHP on the back end is hitting song controller update and that's all you care about. And you can see here that it hits the correct place, right?

and that's all you care about. And you can see here that it hits the correct place, right? So it's a put to songs song. And the benefit here is that if we go into our web route and we say resource songs, well actually, uh, it's supposed to be resource song. I forgot I changed that. And guess what? It just gets automatically updated here. I didn't have to do anything on my client side code to just receive that change.

I didn't have to do anything on my client side code to just receive that change. So we're really trying to rewire the mental model of routing on the client side. Last but not least, if you are using VENV variables in your code base, which is not uncommon, Wayfinder will generate the type definitions of those VENV variables for you so you know exactly what's available to you based on your env.

so you know exactly what's available to you based on your env. So for example, here we have a V variable here, V variable. We have all of these reverb variables available to us. So if you want to use those ENV variables in your client side code, you would just say import meta ENV. And now look, these are exactly the ones that are available in your ENV. And this works because we are generating in wayfinder, this right here a type definition

And this works because we are generating in wayfinder, this right here a type definition for these ENV variables, right? So if I add something here, if I say scheme, duh, well it just shows up and now you have it available to you in your complete, that's what we like. We like end-to-end type safety between the back end and the front end. This is just a small glimpse

between the back end and the front end. This is just a small glimpse of what's available in Laravel Wayfinder. And something to keep in mind is all of these types generated, it looks like a lot, but they all get compiled away in the final bundle. None of these types end up in the final bundle. And everything that we are generating is tree shakeable. So if you don't end up using it, it just gets tree shaken away.

So if you don't end up using it, it just gets tree shaken away. It doesn't end up in the final bundle. And that's Laravel Wayfinder.