How to make Turbo Drive work with php files and query strings

1

I just got to know the Hotwire concept and I was playing around with it. I don’t have a Rails background, I’m just playing around with PHP.

I have pages like: index.php?page=0, index.php?page=1 etc.

I got Turbo Drive (7.0.0 beta 3) to work with standard HTML pages by importing like this:

<script type="module">
import hotwiredTurbo from 'https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/min/@hotwired/turbo.js';
</script>

I also have checked the old Turbolinks documentation and could get Turbolinks 5.2.0 to work with PHP like this:

<script>
Turbolinks.Location.prototype.isHTML = function() {
   var extension = this.getExtension()
    return extension == null ||
           extension === ".php" ||
           extension.match(/^\d/)
}
</script>

Thanks to this Github issue.

How would I do this with Turbo drive?

Replacing Turbolinks.Location.prototype.isHTML with hotwiredTurbo.Location.prototype.isHTML doesn’t work.

Probably due the fact it’s imported as a module right now instead of a script.

Probably I miss something trivial regarding JavaScript modules (can I compile it to a script?) and how I can get Turbo Drive to work with php by modifying the isHTML prototype.

1 Like
2

I had a similar problem getting .aspx extensions to work. This snippet of code below seems to be working for me. You should be able to replace aspx with php, and be good to go. So far, I haven’t encountered problems with query strings. It looks like they should just work.

let isHtml = function (testing) {
    let components = testing.pathname.split("/").slice(1);
    let lastPathComponent = components.slice(-1)[0];
    let extension = (lastPathComponent.match(/\.[^.]*$/) || [])[0] || "";
    
    return location.origin === testing.origin && !!extension.match(/^(?:|\.(?:htm|html|xhtml|aspx))$/)
}

isHtml = isHtml.bind(Turbo.navigator.adapter.session);
Turbo.navigator.adapter.session.locationIsVisitable = isHtml;
1 Like
3

Thanks! I’ll try it out.

4

Absolutely. As a heads up, I pushed this change over to another test site of mine, and it didn’t work right off. That site was running “beta.2”. Upgrading it to “beta.4” was all I needed in order to get that site working.

1 Like
5

Finally got the time to get to work on this. @bteller I tried to implement your example, with aspx changed to php. However it doesn’t seem to work or get triggered on a navigation.

Any tips on how to get the current Turbo release to work with plain PHP are welcome.
The url format I use is: index.php?page=1, index.php?page=2.

6

Sadly, the source has been changed again and it is no longer possible to access the internals and override the isHTML function as I’d originally described. There is a GitHub issue, Override isHTML or locationIsVisitable? · Issue #185 · hotwired/turbo (github.com), but it is still open. It appears the only options are to fork the repository and override it in code, or manipulate the bundled production version of the script and override it there. Neither are great solutions. I’d prefer the Turbo team add an override check to the top of their isHTML function and allow us to override it in the fashion suggested below. In that way, it doesn’t matter how they refactor the code or where they move that function too, we can always override the internals.

Turbo.overrides.isHTML = () => { return true; }
1 Like
7

Thanks @bteller I was checking several issues including that topic. However, there isn’t a lot of movement unfortunately.