hotwired / turbo-rails

Use Turbo in your Ruby on Rails app
https://turbo.hotwired.dev
MIT License
2.09k stars 322 forks source link

how do you install turboframes into a rails 5 project that migrated to rails 7 using only sprockets (skipping all the webpack & 6 bs)? #633

Closed azeemh closed 3 months ago

azeemh commented 4 months ago

how do you install turboframes into a rails 5 project that migrated directly to rails 7, skipping 6. (i've seen instructions for 6 but not for 5 or 7 using only sprockets)

the rails ujs upgrading guide has no instructions for people who didn't use turbolinks at all in 5 either.

(we didn't use turbolinks in 5 because it broke production on Zedtopia.com & ruined iframe sandboxing of user uploaded html content by appending the user styles to head when I tried it with vue... so if a user post had background red in their styles it would change the whole app's background instead of just their sandboxed iframe.)

so before you even spend any time answering this question, for those of you who got it to run: does Turbo have the same problem? (If so you saved me and you alot of time and I won't even add Turbo)

DETAILS:

right now we're on 7 but using sprockets, no esbuild was ever installed, no js packs or anything from rails 6 were used. It was built in rails 5 then migrated straight to rails 7. -- I have one application.js and it's in the assets folder. (no packs etc)

there is no webpacker or stimulus being used, all js files are just stored in assets/javascripts and served via sprockets.

I just want turboframes to stream and append the next pagination items from an array of @feeditems, async without using redis, just as a controller response to a get request.

is there a turboframe.js i can simply add to the assets folder or a way to include it without breaking things? and all the syntax in the readmes and various articles over the last 2 years has been incorrect or had typos, I really need correct instructions.

Various approaches I tried:

(I've tried: https://dev.to/chwistophe/rails-7-pagination-with-turbo-frame-streams-infinite-scrolling-stimulus-js-3fih#paging_with_infinite_scrolling AND https://www.bearer.com/blog/infinite-scrolling-pagination-hotwire AS WELL AS https://turbo.hotwired.dev/handbook/installing)

I don't even need stimulus, just a simple click to load more would suffice.

I did the click to load more but I would always get a full html response, never a turbostream.

No broadcasts are needed, just simple turbo stream instead of a js.erb -- which we still use. (you can see the js.erb live if you sign up and star an idea) (went from coffeescript to js.erb)

Finally please provide an example with a custom controller action that wasn't generated like a model.

For example, I have a home controller with a feed action that acts as the feed page showing you all 7 models (thoughts, ideas, artwurx, events, products, services, quests) from all the people you follow.

I store them in the home controller feed as @feeditems, and the template is just views/home/feed.html.erb.

I was told that I need to install the gem and install importmaps before it in the gemfile, however even with those installed I was getting an error saying such a response format doesn't exist if I even added a respond_to |format| with format.turbostream.

Running ruby 3.2, rails 7.0.4, db is postgresql, deployed live on heroku at www.zedtopia.com (it's running stable branch without any turboframes, linked here so you get an idea)

mvz commented 3 months ago

Try adding importmap-rails first. Since your application.js lives under assets/, Sprockets will report a conflict with the new app/javascript/applications.js. We solved that by renaming the old application.js, but keeping both javascript_importmap_tags from importmap-rails, and the old javascript_include_tag but with the renamed application.js.

After that, adding turbo-rails to the Gemfile and running bin/rails turbo:install should do the right thing.

azeemh commented 3 months ago

thank you.

i just tried that and it works. much thanks and appreciation.