Purpose

A small POC of how you could implement "islands" in Rails using Vite + Turbo frames

Demonstration

2024-07-07-18-35-30.mp4

How does it work?

It works by (ab)using additionalEntrypoints from Vite Rails, and then using View paths as conventions to grab the associated "sidecar assets" (co-located CSS / JS files) and loads them via <turbo-frame>s. It also comes with an IslandsController for lazy loading an island from a URL.

Whats been modified to make this work?

config/vite.json has the following: "additionalEntrypoints": ["app/views/islands/**/*.(js|css)"]

This tells it to treat any JS or CSS files in app/views/islands as an entrypoint that can be loaded with:

<!-- app/views/islands/_island_1.html.erb -->
<%= vite_javascript_tag "/app/views/islands/_island_1.js" %>
<%= vite_stylesheet_tag "/app/views/islands/_island_1.css" %>

<turbo-frame id="island-1">
</turbo-frame>

There's also an IslandsController which is responsible for lazy-loading islands from a url like:

GET /islands/island_1

Key points:

• Supports lazy loaded islands that go to /islands/:id and the controller will load up the proper HTML / CSS / JS and insert via <turbo-frame>
• Could swap out <turbo-frame> for a solution like <is-land> for more advanced loading or some other lazy loading solution that doesn't link via id so you can load the same island multiple times on the same page.

Caveats

• The steps for making an island are very manual right now by needing to wrap in a <turbo-frame>, supply an id, and manually add the CSS / JS files to be loaded in the view. (Check out app/views/islands and check out the .html.erb partials to see how this is done.

• Right now only 1 instance of any particular island is allowed per page due to how <turbo-frame> requires ids to work properly. This seems fine...I doubt you load the same island twice. This will also inject your CSS / JS from your island multiple times as well.

Running the repo

git clone https://github.com/KonnorRogers/rails-islands.git
cd rails-islands
bundle install
npm install
overmind start -f Procfile.dev

Then go to localhost:3000 and check out the magic.