Stencil on Rails
The stenciljs
gem brings Stencil onto Rails.
Usage
Installation
Make sure to install Node.js. npm, and yarn. Add this line to your application's Gemfile:
gem 'stenciljs', git: 'https://github.com/yuki24/stenciljs-gem.git'
And then execute bundle
. Once the gem is ready, try running the stencil:install
task:
rake stencil:install
This will generate preconfigured Stencil files in your app that is best suited to Rails apps. It is highly recommended not to change them unless you are familiar with Stencil.
In order to build your new Stencil component, just run:
rake stencil:start
This is a command equivalent to yarn start
in the stencil-app-starter
repository. It watches file changes and compiles components into vanilla JavaScript.
Finally, add the following tag to an ERB template. The <hello-world>
component is an example component generated by the rake stencil:install
by default, so you can change or remove it as you need.
<hello-world first="Stencil" last="'Don't call me a framework' JS"></hello-world>
You are all set! Try opening the page you added the <hello-world>
tag to and make sure you see Stencil 'Don't call me a framework' JS
.
Generator
The stenciljs
gem comes with a very handy component generator:
rails g stencil:component your-component
This will generate the following files with the element name you specified:
app/javascript/components/your-component
├── your-component.scss
├── your-component.spec.ts
└── your-component.tsx
Rake tasks
The stenciljs
gem provides the following rake tasks:
Rake task | Yarn script | Actual command |
---|---|---|
rake stencil:build |
yarn run build |
stencil build |
rake stencil:compile |
yarn run build |
alias to stencil:build |
rake stencil:dev |
yarn run dev |
sd concurrent "stencil build --dev --watch" "stencil-dev-server" |
Not implemented | yarn run serve |
stencil-dev-server |
rake stencil:start |
yarn start |
alias to dev |
rake stencil:test |
yarn test |
jest --no-cache |
rake stencil:test:watch |
yarn test.watch |
jest --watch --no-cache |
Rake Tasks or Yarn Scripts?
There's nothing wrong with both and you should use what feels most natural to you. The only notable thing is that rake stencil:compile
is registered as a prerequisite of rake assets:precompile
for easier deployment.
Upcoming Features
- Auto-compile components on a file change without having to run
rake stencil:start
oryarn start
- Add the ability to specify props when generating a component stub
- Write more tests and add support for older Rails versions
Contributing
- Fork it (https://github.com/yuki24/stenciljs-gem/fork)
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Make sure all tests pass (
bundle exec rake
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
License
Copyright (c) 2017 Yuki Nishijima. See MIT-LICENSE for further details.