https://github.com/konnorrogers/rails-islands

A small POC of how you might build islands into Rails + Vite. There's a ton of ways to make it better.
https://github.com/konnorrogers/rails-islands

Last synced: 5 days ago
JSON representation

A small POC of how you might build islands into Rails + Vite. There's a ton of ways to make it better.

• Host: GitHub
• URL: https://github.com/konnorrogers/rails-islands
• Owner: KonnorRogers
• Created: 2024-07-07T22:17:07.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-09T01:08:12.000Z (4 months ago)
• Last Synced: 2024-10-05T11:59:01.632Z (about 1 month ago)
• Language: Ruby
• Size: 44.9 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Purpose

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

## Demonstration

## 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 ``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:

```erb

<%= vite_javascript_tag "/app/views/islands/_island_1.js" %>

<%= vite_stylesheet_tag "/app/views/islands/_island_1.css" %>

```

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 ``

- Could swap out `` for a solution like `` 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 ``, supply an `id`, and manually add the CSS / JS files to be loaded in the view. (Check out [app/views/islands](/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 `` 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

```bash

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.