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 or yarn start
• Add the ability to specify props when generating a component stub
• Write more tests and add support for older Rails versions

Contributing

1. Fork it (https://github.com/yuki24/stenciljs-gem/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Make sure all tests pass (bundle exec rake)
5. Push to the branch (git push origin my-new-feature)
6. Create new Pull Request

License

Copyright (c) 2017 Yuki Nishijima. See MIT-LICENSE for further details.