search

11ty / is-land

A new performance-focused way to add interactive client-side components to your web site.
https://is-land.11ty.dev/
MIT License
526 stars 17 forks source link

Support loading islands from a URL #25

Open KonnorRogers opened 1 month ago

KonnorRogers commented 1 month ago

Prior Art: https://turbo.hotwired.dev/reference/frames#lazy-loaded-frame

<turbo-frame id="messages" src="/messages" loading="lazy">
  Content will be replaced when the frame becomes visible and /messages has been loaded.
</turbo-frame>

Maybe don't need the loading, but being able to load a route on client:visible would be 🤌

Something like:

<is-land client:visible src="/island-1.html">
  <!-- Injects HTML from `src` here: -->
</is-land>

Happy to discuss further!

zachleat commented 1 month ago

I do this pattern quite a bit but pairing it with an html-fetch custom element:

Definition: https://github.com/11ty/11ty-website/blob/67b3b23154110846c71ebe7857e63de8efd51e07/src/_includes/components/html-fetch.js#L2

Example use: https://github.com/11ty/11ty-website/blob/67b3b23154110846c71ebe7857e63de8efd51e07/src/_includes/supporters.njk#L24-L29

The simplest usage would be:

<is-land on:visible><html-fetch src="/imports/supporters.html"></html-fetch></is-land>
zachleat commented 1 month ago

Maybe I need to package up html-fetch?