Looking for Webpack support? 👀

Installation

gem'opal-rails'

bin/rails g opal:install

Configuration

For the compiler

# Compiler optionsRails.application.configuredoconfig.opal.method_missing_enabled=trueconfig.opal.const_missing_enabled=trueconfig.opal.arity_check_enabled=trueconfig.opal.freezing_stubs_enabled=trueconfig.opal.dynamic_require_severity=:ignoreend

For template assigns

Rails.application.configuredo# ...config.opal.assigns_in_templates=trueconfig.opal.assigns_in_templates=:locals# only localsconfig.opal.assigns_in_templates=:ivars# only instance variablesend

Usage

Basic example

Rails 7 example

puts"hello world!"require"native"$$[:document].addEventListener:DOMContentLoadeddo  $$[:document][:body][:innerHTML]='<h2>Hello World!</h2>'end

Hello World!

Rails 5 example

# Require the opal runtime and core libraryrequire'opal'# For Rails 5.1 and above, otherwise use 'opal_ujs'require'rails_ujs'# Require of JS libraries will be forwarded to sprockets as isrequire'turbolinks'# a Ruby equivalent of the require_tree Sprockets directive is availablerequire_tree'.'puts"hello world!"

A more extensive Rails 5 example

require'opal'require'opal_ujs'require'turbolinks'require_tree'.'# a Ruby equivalent of the require_tree Sprockets directive is available# ---- YOUR FANCY RUBY CODE HERE ----## Examples:# == Print something in the browser's consoleputs"Hello world!"pphello::worldrequire'console'$console.log%w[Helloworld!]# == Use Native to wrap native JS objects, $$ is preconfigured to wrap `window`require'native'$$.alert"Hello world!"# == Do some DOM manipulation with jQueryrequire'opal-jquery'Document.ready?doElement.find('body').html='<h1>Hello world!</h1>'end# == Or access the DOM api directly$$[:document].addEventListener(:DOMContentLoaded,->{  $$[:document].querySelector('body')[:innerHTML]='<h1>Hello world!</h1>'})

Using Sprockets directives andapplication.js

//= require opal//= require rails_ujs//= require turbolinks//= require_tree .//= require appOpal.require('opal');Opal.require('app');

As a template

# app/controllers/posts_controller.rbdefcreate@post=Post.create!(params[:post])rendertype::js,locals:{comments_html:render_to_string(@post.comments)}end

# app/views/posts/create.js.opalpost=Element.find('.post')post.find('.title').html=@post[:title]post.find('.body').html=@post[:body]post.find('.comments').html=comments_html

Instance and local variables in templates

Rails.application.configuredo# ...config.opal.assigns_in_templates=true# ...end

As a Haml filter (optional)

-# app/views/posts/show.html.haml%article.post  %h1.title= post.title.body= post.body%a#show-comments Display Comments!.comments(style="display:none;")  - post.comments.each do |comment|.comment= comment.body:opal  Document.ready? do    Element.find('#show-comments').on :click do |click|      click.prevent_default      click.current_target.hide      Element.find('.comments').effect(:fade_in)    end  end

RSpec support

gem'opal-rspec-rails',github:'opal/opal-rspec-rails'

Minitest support

Shared templates

.row.col-sm-12    = @bar

# config/initializers/opal.rbRails.application.config.assets.paths <<Rails.root.join('app','views','shared').to_s

# app/assets/javascripts/application.rbrequire'opal'require'opal-haml'require'test'@bar="hello world"template=Template['test']template.render(self)# =>  '<div><div>hello world</div></div>'

Using Ruby gems from Opal

Opal.use_gem'cannonbol'

Contributing

bin/setupbin/rake

bin/rackup# visit localhost:9292

bin/sandbox # will re-create the appbin/rails s # will start the sandbox app server# visit localhost:3000

License

Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included inall copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS INTHE SOFTWARE.