From our experience with Turbo so far, we found Turbo-Frames to be very handy and can be easily used out of the box. But, as Hotwire is a relatively new tool, we often come across to situations where something seems to be missing, or it doesn’t work as it is supposed to. Skroutz’s engineers always look for opportunities to contribute to open source projects, and this seemed to be a perfect opportunity, so we proceeded by opening some pull requests to the Hotwire’s repo.
Now, let’s take a look at the pull requests that have already been merged and see what problem, each one of them, tries to solve.
Including url in
Turbo fires the
turbo:before-fetch-request before it issues a network request. Let’s say that we have multiple Turbo-Frame elements in the page and each one of them, uses a different endpoint to update its contents. Let’s also say that we have the following event listener attached to the document:
Before #289 got merged, we didn’t have a way to distinguish each one of those events. We just knew that some Turbo element issued a network request. By making available the
url to which the network request gets issued, from the respective event, we can add any custom logic that handles the different urls.
For example, we can do this:
Adding the target element to
turbo:before-fetch-response fires after the network request completes. Those events used to get fired on the document and we couldn’t identify the element that caused the network request / response, from an event listener attached to the document.
This PR adds the target element to the
turbo:before-fetch-response events, so that we can listen for those events coming from specific elements, like this:
turbo:frame-load cherry-picked from #59
Lifecycle events were missing from Turbo-Frames until
turbo:frame-load were introduced, and gave us the opportunity to hook various handlers on those events.
These get fired as soon as the Turbo-Frame element has rendered its contents and when it has finished loading, respectively. Furthermore, these events get fired on the respective Turbo-Frame element, rather than on the document, making it easier to target specific elements.
Introducing test runner options
This PR doesn’t affect the tools that Turbo provides, directly, but it makes the development of Turbo’s features a lot easier, by adding some options to the testing process. Specifically, it adds the
You can use the
--grep option when you want to target a specific test case.
You can use the
--environment option when you want to set the environment on which you want to perform the tests.
Avoiding race condition between visit tests
This is another PR that improves the development experience of Turbo features by fixing a race condition that was happening when the page location was changed asynchronously and an event logs array was getting out of sync. You can inspect the PR for more details regarding the relevant changes.
Summing it up, here’s a list of the commits sent upstream so far: