prefetch_controller.js

import { Controller } from "stimulus";
import { get } from "@rails/request.js";
import { PageSnapshot } from "@hotwired/turbo";

export default class extends Controller {
  static values = { hoverTime: Number };
  connect() {
    this.element.addEventListener("mouseover", this.prefetch.bind(this));
    this.element.addEventListener("touchstart", this.prefetch.bind(this));
  }

  async prefetch(e) {
    if (this.prefetched) return;

    const response = await get(this.url.toString());

    if (response.ok) {
      const html = await response.html;
      const snapshot = snapshotFromHTML(html);
      Turbo.navigator.view.snapshotCache.put(this.url, snapshot);
    }
  }

  get prefetched() {
    return (
      location.href === this.url ||
      Turbo.navigator.view.snapshotCache.has(this.url)
    );
  }

  get url() {
    this._url =
      this._url || new URL(this.element.getAttribute("href"), document.baseURI);

    return this._url;
  }

  get hoverTime() {
    return this.hoverTimeValue || 300;
  }
}

const snapshotFromHTML = (html) => PageSnapshot.fromHTMLString(html);