[RF-DOCS] Update the JavaScript in Rails guide - #58165
Conversation
|
Thank you for putting this together. I think the Stimulus section is a good addition. Some small things I noticed:
Not sure if this belongs here, but should the turbo section mention that Inline scripts in turbo loaded content run even when CSP should block them - see hotwired/turbo-rails#757 So before you integrate turbo you should know that CSP won't protect you the way you'd expect, and right now there is nothing in the docs that tells you that. |
|
Thanks for the feedback @rocket-turtle, nice catches. Fixed everything.
Did a quick check of your repo on Ruby 4.0.2 and I couldn't reproduce the issue. I get a message on both Safari and Firefox that a script was blocked from running by the CSP. Haven't got the time to look deeper so I didn't comment on the issue, but for now I'll leave it out of the guide. Worth revisiting if we get more info from the Hotwire team. |
|
@ayushn21 I rechecked the issue with rails 8.1 and the latest turbo version and its still there. I added a video in the issue. Maybe you just opend the page and did not click the link. On first page load the CSP is working because the page is not loaded via turbo. Noone from Hotwire Teams respondet (issue is from 2025) so I think there could be a hint in the documentation that users know the issue and take care them self. |
98bb14b to
c0c976f
Compare
|
@rocket-turtle I can reproduce it now, not sure why it didn't happen earlier ... I didn't do anything different. Anyway, I'm not sure this issue fits in with this guide, it's really more of a bug report so hopefully the Hotwire team will address it soon. That said, a Hotwire with Rails guide is in the works and a lot of material from this guide will be moved to that, so I'll might mention it in that guide if I feel it fits. Thanks! |
3 participants
Motivation / Background
Update the JavaScript in Rails guide.
Detail
A summary of the key changes:
turbo-railsandstimulus-rails.request.js.Additional information
Internal Audit
The heading 'Adding npm Packages to Javascript bundlers' -> could change this to 'Using Javascript Bundlers' to make it a bit more general.
"The version of your Node.js runtime should be printed out. Make sure it’s greater than 8.16.0." -> Node.js 8 reached end of life a while ago it looks like - maybe we should bump this a bit to 'Make sure it's greater than 18'?
Section 4.1 -> maybe this Turbo Drive part could be put into a NOTE block somewhere else rather than being its own section?
Section 5.1 -> I think the heading 'method' is potentially too vague. What if we changed this to 'Overriding HTTP Methods'?
We could tidy up the AJAX request example - the function call has a space before the () which we can remove and I think it's worth potentially showing that after the
const body = await response.text
line the function would continue to go on further, e.g. "// do something with body" or just "...."
Some extra content that we could include in this guide:
The first three sections: "Import maps", "Adding npm Packages with JavaScript Bundlers" and "Choosing Between Import Maps and a JavaScript Bundler" are all about adding JavaScript to an application. Maybe combine these into a single "Adding npm Packages" section. Then it's also clear to skip this section if you already have JavaScript packages installed in your application.
Turbo
http://www.rubydoc.info/gems/turbo-rails/2.0.23/Turbo/DriveHelper
http://www.rubydoc.info/gems/turbo-rails/2.0.23/Turbo/FramesHelper
Checklist
Before submitting the PR make sure the following are checked: