îles

Turbo (Experimental) 🚀

îles provides an experimental turbo mode that enables SPA-like navigation.

It combines techniques from quicklink and @hotwired/turbo, but taking advantage of the architecture of every îles site to achieve it in under 2kb.

You can see it in action in this site!

How it Works 🔍

  • Links in the viewport are detected and prefetched like in quicklink
  • When a link is clicked, the head and body are replaced using the prefetched html, like in @hotwired/turbo
  • Any islands in the previous page are unmounted, islands in the new page are hydrated as needed

When Should I Use It? 🤔

In most sites, standard navigation should already be quite fast given îles allows you to generate sites without any blocking JS, and the interactive pieces are prerendered at build time.

However, since it's very lightweight, it's compatible with the standard lifecycle of any of the supported frameworks, and it will progressively enhance the site, you can use it whenever a snappy navigation is preferrable.

Caveats
  • All script type="module" execute once
  • For islands, use the lifecycle of each component as usual (onMounted, onUnmounted)
  • In client scripts, use the onLoad callback for effects that should run on every page load
  • Code outside components or callbacks won't run on each page navigation
  • Add the once attribute to non-module scripts that should only execute once
Roadmap 🛣

It's possible to avoid unmounting islands that don't change from one page navigation to the other, making them automatically "permanent" (in the @hotwired/turbo terminology) without any intervention from the user.

That would allow persistent components typically found in SPAs like shopping carts to work seamlessly.