Best practices for javascript

[leonard-henriquez]

Is it possible to have javascript as a sidecar file (like this)?

- /app
  - /components
    - /button
      - button.css
      - button.html.erb
      - button.js
      - button.rb

If that's not possible what is the best practice to handle javascript? Should it be mentioned in the readme?

Is it planned to develop a feature to pass ruby variables from components to javascript (as it's done by the gon gem)?

PS: Please be gentle, it's my first issue 🐣
@joelhawksley Thank you so much for this gem! I have been waiting for this for years. I am so glad it's been merged in Rails. 🎉

[jonspalmer]

There is a decent set of prior conversations around this topic - #67 and in this thread: #15 (comment)

TL;DR; there isn't a clear answer yet but one folder per component is tough due to Ruby's folders==namespace requirement.

[joshleblanc]

Stimulus is a great companion to actionview components. I'd say they just exist in app/javascript/controllers like normal. The data-controller in the erb specifies the controller.

https://stimulusjs.org

[jaredcwhite]

If you want to add Stimulus controller files directly into your components tree, you can set it up like this:

const application = Application.start()
const context = require.context("controllers", true, /.js$/)
const context_components = require.context("../../components", true, /.js$/)
application.load(
  definitionsFromContext(context).concat(
    definitionsFromContext(context_components)
  )
)

Works with Stimulus namspacing as well, so for instance app/components/parent/child_controller.js would be identified by parent--child which works nicely alongside Parent::ChildComponent on the ActionView::Component side.

[jaredcwhite]

I also started experimenting with an actual web component JS pattern too, rather than use Stimulus, so in that case I created an app/javascript/components.js file to import into the webpack and it just does this:

function importAll(r) {
  r.keys().forEach(r)
}

importAll(require.context("../components", true, /_component.js$/))

Now any sort of file like widget_component.js that lives somewhere in app/components will get automatically imported into the pack.

[jaredcwhite]

@joelhawksley Would the two posts above be helpful in getting added to documentation somewhere for further review and revision? Seems like it shouldn't be stuck in an issue. I'd be happy to move stuff to a doc or wiki file somewhere.

[joelhawksley]

@jaredcwhite do either of those solutions prevent a component-specific JS file from containing code that interacts with other components/views?

I'm wary of encouraging the use of sidecar JS files until we have a solution that gives us this isolation guarantee.

[jaredcwhite]

@joelhawksley Well, in either the case of it being a Stimulus controller or a Web Component, the HTML markup and the JS are pretty well aligned and nothing's "leaking" out into anything else (plus it makes use of the typical way Webpack keeps different files pretty well isolated). But nothing would prevent someone from manually writing JS code to affect some other part of the page with DOM commands or whatever. I don't think there's really any way to prevent that though (I mean, even a React component could have crazy DOM commands embedded within it if somebody went nuts with that).

[joshleblanc]

The stimulus solution is mounted by markup, so while you could mount the stimulus controller in mutliple components, you probably wouldn't.

If you have a component for badges, and you wanted to attach a stimulus controller to that, your component's markup just looks like

<div data-controller="badge">
...
</div>

That would attach the BadgeController controller to the div element there. It would be up to the programmer to that - there's no accidental overlap. It's all strictly intentional.

[joelhawksley]

@jaredcwhite @joshleblanc thanks for following up!

@jaredcwhite let's move forward with adding a section to the README. I'd love to have @dpaola2 give an opinion on this as well.

FWIW, we haven't pursued sidecar JS files internally, which is the source of my hesitation here, having not seen these ideas in practice. Would you be willing to provide a demo component in your PR?

[jaredcwhite]

@joelhawksley That sounds cool, I'll write something up for the readme and submit a PR. I'll see if I can pull a generic component example or two out of the work I've been doing (and obviously other people might have different approaches as well so the more feedback the better!).

[dpaola2]

I have no experience adding javascript (yet) to components. It should be noted that I am using Bootstrap heavily and it utilizes javascript in a more global way - the JS is not packaged with the component, it's part of the bootstrap library and its dependencies.

[joelhawksley]

Closing this for now, as we've merged #283. I'd love to see more examples/discussion on this topic, especially in the form of PRs to add to @jaredcwhite's README section ❤️