Make web components easier to develop in Rails using Sprockets.

Just add gem "sprockets-components to your Gemfile.

Use one directory per component, under app/assets/components:

app/assets/
└── components
    └── my-counter
        ├── my-counter.js
        ├── my-counter.scss
        └── my-counter.slim

At the top of the main my-counter.js component file, add the component directive:

//= component

customElements.define("my-counter", class extends HTMLElement {
  // ...
})

This directive exposes an HTML variable for use in the component. It is a string of the compiled template, with the compiled CSS inlined into an interior <style> tag.

Use the component in your views, as you'd expect. Sprockets compiles it all down to a single compiled js file. This file can be included directly, or //= required into other files, or exposed to the importmap, or whatever you want!

<!-- app/views/test/test.html.erb -->
<%= javascript_include_tag "my-counter" %>
<my-counter value="0"></my-counter>

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and the created tag, and push the .gem file to rubygems.org.

Bug reports and pull requests are welcome on GitHub at https://github.com/botandrose/sprockets-components.

The gem is available as open source under the terms of the MIT License.