... did close. The reason it closed is important. In the new() action, we redirect to the index page. That page extends the normal base.html.twig... so it does have a <turbo-frame id="modal"> on it... but it's this empty one ...

It was subtle, but we just saw one important property of Turbo frames. When we submitted this form successfully, it submitted to the edit action inside of ProductAdminController. This code handled the form submit and ...

... .. so that we can cleanly give this a few classes. For the text, say "Edit". Nothing magic yet. When we refresh, there's our link... a fantastically boring edit link. Thanks to Turbo Drive, clicking it feels pretty good ...

... by adding Turbo. At your terminal, say: composer require symfony/ux-turbo Here's the juiciest part: just like when we added Stimulus, there's absolutely nothing else you need to do ...

What about CSS transitions between pages as we click around? This is something that a competing library called Swup does very well. But in Turbo, it's not so easy. Well, it will be easier once a PR is merged into Turbo ...

... plan: if a turbo-frame - like the turbo-frame in _modal.html.twig - has a data-turbo-form-redirect="true" attribute - which I totally just invented - then we will redirect the whole page if we detect a redirect in that ...

... submits. The best part? We can make this happen for every form on our site by leveraging an event that Turbo dispatches. In your editor, open up assets/turbo/turbo-helper.js. Anywhere in the constructor, listen to a new ...

How does Turbo handle when a JavaScript or CSS file that's downloaded onto our page changes? When we navigate, it's smart enough to merge any new CSS or JS into our head element without duplicating anything that's ...

... scroll up. Ah, here's the problem. When we submitted the add to cart form into the frame, our controller redirected and the turbo frame followed that redirect. This request is the POST to /cart... and this is the Ajax ...

... biggie. Oh, and, View Transitions will come Standard in Turbo 8 for full page navigation. Though, we'll take them even a bit further. To use View Transitions, you do not need any external library. But we're going to use ...

Head to the cart page and click the feature product to go to its page. Whoa. It disappeared! And... we're still on the cart page. Head to the console. Ah, that's a familiar error! Response has no matching <turbo-frame ...

... As we've learned, each time Turbo makes an Ajax call, it listens to see if the response has a content type of text/vnd.turbo-stream.html. If it does, then the HTML is passed to the Turbo Stream system... and it works ...

... ... nothing happens! But down on the web debug toolbar, you can see that an Ajax call failed! So... we all know that - despite our awesomeness - errors happen. When you work with turbo frames, these errors are harder to see ...

... with modal:m-0 and modal:p-0: Next, make the edit link target the modal frame. This lives in _row.html.twig. I'll break this onto multiple lines.... then add data-turbo-frame="modal": Moment of truth. Refresh. And ...

... now a div that contains a dialog... that's closed. Now for the magic touch: remove the guts of the dialog: only keep these two divs: they help give us padding and nice scroll behavior. Inside, add a <turbo-frame> with id ...

With Turbo Drive, when we click a link or submit a form, and that takes longer than 500 milliseconds to load, we get a loading animation on the top of the page... which we don't see here because this is all loading fast ...

... over in turbo-helper.js, both turbo:before-render and turbo:render happen when both a real page renders and when a preview renders. That means that, when a preview is shown, it gets the same transition effect as a real ...

Thanks to the turbo-frame system, we're now lazily-loading just part of the weather page down in the footer. And... notice that this is working... which actually proves something: script tags inside frames are executed ...

I want to show one more lazy frame example. But before we do, I'm going to find my terminal and, yes, once again, run: yarn upgrade @hotwired/turbo This time I get beta version 8 ...

... 3000 and come back to my computer tomorrow. During that time, my session has timed out. What would happen if I tried to submit this form - which submits into a turbo-frame - without refreshing first? Well... let's try ...