Document a propshaft approach to JS/CSS #2160
Conversation
Resolves ViewComponent#1064 Given Rails 8 has been released without transpilation or bundled JavaScript by default, this documentation update demonstrates how to use Stimulus and CSS in a ViewComponent without webpacker. A more terse demonstration would be possible without the view component arguments and/or less complicated Stimulus behaviour however that might be less instructive. One of the trickier aspects of binding Stimulus controllers is often determining the correct data-controller key to use, especially when namespaces and/or multi-word component names are involved which this example makes explicit. Approach 2 demonstrates the Stimulus behaviour but not the css, that would likely involve dartsass-rails
| @@ -10,6 +10,10 @@ nav_order: 5 | |||
|
|
|||
| ## main | |||
|
|
|||
| * Add documentation for JavaScript and CSS without webpacker | |||
There was a problem hiding this comment.
| * Add documentation for JavaScript and CSS without webpacker | |
| * Add documentation for JavaScript and CSS without webpacker. |
There was a problem hiding this comment.
Thanks for the suggestion Joel. It looks like Github uses a Catalyst approach instead of Stimulus. I have to admit, I wasn't aware of Catalyst at all and it's really interesting.
It helps explain the shadow root web component approach described in Encapsulating assets. Separately, that section appears to be unchanged since the original gem documentation was released. When I came across it, my immediate tendency was to overlook it (and the Webpacker section) given the Rails buzz around import maps / Stimulus / eliminating node atm. Perhaps there's an opportunity to mention Catalyst or contextualise Web Components a bit more in that section to help justify it's approach?
I believe it was @reeganviljoen who suggested documentation for this would be useful. I was blocked for awhile trying to figure this out in lieu of anointed documentation. Now that Rails defaults have been updated to remove Webpacker and include stimulus-rails, I suspect I'm not the only one per the activity in Issue #1064.
ViewComponent's Governance documentation suggests there are several folks with commit access to this gem. Does GitHub have a process for allocating reviewers to pull requests? I'm not very familiar with the project prior to this so wouldn't know who to approach.
Resolves #1064
Given Rails 8 has been released without transpilation or bundled JavaScript by default, this documentation update demonstrates how to use Stimulus and CSS in a ViewComponent without Webpacker.
A more terse demonstration would be possible without the view component arguments and/or less complicated Stimulus behaviour however that might be less instructive.
One of the trickier aspects of binding Stimulus controllers is often determining the correct data-controller key to use, especially when namespaces and/or multi-word component names are involved which this example makes explicit.
Approach 1 outputs a stylesheet link tag into HTML potentially several times if a ViewComponent using this technique is re-used in a page several times. Aside from that affecting the aesthetic of the rendered source, it seems like a reasonable trade-off to ensure the ViewComponent is completely self-sufficient inclusive of styling in lieu of the
Encapsulating assetsapproach. A sidecar loaded .css (or .scss) file seems a like a logical place to look for styling.Approach 2 demonstrates the Stimulus behaviour but not the css, that would likely involve dartsass-rails.