Git Product home page Git Product logo

opal-sprockets's Introduction


Opal
Opal-Ruby ๐Ÿ’› JavaScript

Opal is a Ruby to JavaScript source-to-source compiler.
It also has an implementation of the Ruby corelib and stdlib.

Community:
Stack Overflow Backers on Open Collective Sponsors on Open Collective Slack Documentation
Code:
Gem Version Build Status Code Climate Coverage Status
Sponsors:
Nebulab: Open Source Fridays

Usage

See the website for more detailed instructions and guides for Rails, jQuery, Sinatra, rack, CDN, etc. https://opalrb.com.

Compiling Ruby code with the CLI (Command Line Interface)

Contents of app.rb:

puts 'Hello world!'

Then from the terminal

$ opal --compile app.rb > app.js # The Opal runtime is included by default
                                 # but can be skipped with the --no-opal flag

The resulting JavaScript file can be used normally from an HTML page:

<script src="app.js"></script>

Be sure to set the page encoding to UTF-8 inside your <head> tag as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="app.js"></script>
    โ€ฆ
  </head>
  <body>
    โ€ฆ
  </body>
</html>

Just open this page in a browser and check the JavaScript console.

Compiling Ruby code from Ruby

Opal.compile is a simple interface to just compile a string of Ruby into a string of JavaScript code.

Opal.compile("puts 'wow'")  # => "(function() { ... self.$puts("wow"); ... })()"

Running this by itself is not enough; you need the opal runtime/corelib.

Using Opal::Builder

Opal::Builder can be used to build the runtime/corelib into a string.

Opal::Builder.build('opal') #=> "(function() { ... })()"

or to build an entire app including dependencies declared with require:

builder = Opal::Builder.new
builder.build_str('require "opal"; puts "wow"', '(inline)')
File.binwrite 'app.js', builder.to_s # must use binary mode for writing

Compiling Ruby code from HTML (or using it as you would with inline JavaScript)

opal-parser allows you to eval Ruby code directly from your HTML (and from Opal) files without needing any other building process.

So you can create a file like the one below, and start writing ruby for your web applications.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.opalrb.com/opal/current/opal.js"></script>
    <script src="https://cdn.opalrb.com/opal/current/opal-parser.js" onload="Opal.load('opal-parser')"></script>

    <script type="text/ruby">
      puts "hi"
    </script>

  </head>
  <body>
  </body>
</html>

Just open this page and check the JavaScript console.

NOTE: Although this is possible, this is not really recommended for production and should only be used as a quick way to get your hands on opal.

Running tests

Setup the project:

$ bin/setup

The test suite can be run using:

$ bundle exec rake

This command will run all RSpec and MSpec examples in sequence.

MSpec

MSpec tests can be run with:

$ rake mspec

Alternatively, you can just load up a rack instance using rackup, and visit http://localhost:9292/ in any web browser.

RSpec

RSpec tests can be run with:

$ rake rspec

Automated runs

A Guardfile with decent mappings between specs and lib/corelib/stdlib files is in place. Run bundle exec guard -i to start guard.

Code Overview

What code is supposed to run where?

  • lib/ code runs inside your Ruby env. It compiles Ruby to JavaScript.
  • opal/ is the runtime+corelib for our implementation (runs in browser).
  • stdlib/ is our implementation of Ruby's stdlib. It is optional (runs in browser).

lib/

The lib directory holds the Opal parser/compiler used to compile Ruby into JavaScript. It is also built ready for the browser into opal-parser.js to allow compilation in any JavaScript environment.

opal/

This directory holds the Opal runtime and corelib implemented in Ruby and JavaScript.

stdlib/

Holds the stdlib currently supported by Opal. This includes Observable, StringScanner, Date, etc.

Browser support

  • Internet Explorer 11
  • Firefox (Current - 1) or Current
  • Chrome (Current - 1) or Current
  • Safari (Current - 1) or Current
  • Opera (Current - 1) or Current

Any problems encountered using the browsers listed above should be reported as bugs.

(Current - 1) or Current denotes that we support the current stable version of the browser and the version that preceded it. For example, if the current version of a browser is 24.x, we support the 24.x and 23.x versions.

12.1x or (Current - 1) or Current denotes that we support Opera 12.1x as well as the last 2 versions of Opera. For example, if the current Opera version is 20.x, then we support Opera 12.1x, 19.x and 20.x but not Opera 15.x through 18.x.

Contributors

This project exists thanks to all the people who contribute. contributors

Versioning

Opal will broadly follow semver as a version policy, trying to bump the major version when introducing breaking changes. Being a language implementation we're also aware that there's a fine line between what can be considered breaking and what is expected to be "safe" or just "additive". Moving forward we'll attempt to better clarify what interfaces are meant to be public and what should be considered private.

Backers

Thank you to all our backers! ๐Ÿ™ [Become a backer]

Become a Backer Button

Sponsors

Donations

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Become a Sponsor Button

Sponsored Contributions

Nebulab Logo

License

(The MIT License)

Copyright (C) 2013-2021 by Adam Beynon and the Opal contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 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 IN THE SOFTWARE.

opal-sprockets's People

Contributors

adambeynon avatar barriehadfield avatar duianto avatar elia avatar fkchang avatar hmdne avatar tobymao avatar tricknotes avatar yhara avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

opal-sprockets's Issues

examples broken please help

Hi, Please help with a working example for opal ~>0.11
I am at the end of my rope here and about to abandon weeks of my time in opal space. You will see I have asked in several repos for a working example but to no avail.

What is happening to opal 0.11 ?
How can people help if the simplest of examples fail to work ?

Error after upgrading to 0.4.2

After upgrading a see and error:

Using opal-sprockets 0.4.2.0.11.0.3.1 (was 0.4.1.0.11.0.3.1)
NameError: uninitialized constant Opal::Sprockets::SourceMapHeaderPatch
  /usr/local/lib/ruby/gems/2.5.0/gems/inesita-0.8.1/lib/inesita/server.rb:94:in `create_source_maps_app'
  /usr/local/lib/ruby/gems/2.5.0/gems/inesita-0.8.1/lib/inesita/server.rb:18:in `initialize'
  config.ru:9:in `new'
  config.ru:9:in `block in <main>'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:55:in `instance_eval'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:55:in `initialize'
  config.ru:in `new'
  config.ru:in `<main>'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:49:in `eval'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:49:in `new_from_string'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:40:in `parse_file'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/server.rb:319:in `build_app_and_options_from_config'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/server.rb:219:in `app'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/server.rb:354:in `wrapped_app'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/server.rb:283:in `start'
  /usr/local/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/server.rb:148:in `start'
  /usr/local/lib/ruby/gems/2.5.0/gems/inesita-0.8.1/lib/inesita/cli/server.rb:21:in `server'
  /usr/local/lib/ruby/gems/2.5.0/gems/thor-0.20.0/lib/thor/command.rb:27:in `run'
  /usr/local/lib/ruby/gems/2.5.0/gems/thor-0.20.0/lib/thor/invocation.rb:126:in `invoke_command'
  /usr/local/lib/ruby/gems/2.5.0/gems/thor-0.20.0/lib/thor.rb:387:in `dispatch'
  /usr/local/lib/ruby/gems/2.5.0/gems/thor-0.20.0/lib/thor/base.rb:466:in `start'
  /usr/local/lib/ruby/gems/2.5.0/gems/inesita-0.8.1/bin/inesita:5:in `<top (required)>'
  /usr/local/lib/ruby/gems/2.5.0/bin/inesita:23:in `load'
  /usr/local/lib/ruby/gems/2.5.0/bin/inesita:23:in `<top (required)>'

For sure it's an inesita issue, but I'm trying to figure out what has changed.

Here is an example of server code from inesita:

    def create_app
      assets_app = @assets_app
      source_maps_app = @source_maps_app
      static_dir = @static_dir

      Rack::Builder.new do
        use Rack::Static, :urls => [static_dir]

        use Rack::Rewrite do
          rewrite(/^(?!#{Config::ASSETS_PREFIX}|#{Config::SOURCE_MAP_PREFIX}).*/, Config::ASSETS_PREFIX)
        end

        map Config::ASSETS_PREFIX do
          run assets_app
        end

        map Config::SOURCE_MAP_PREFIX do
          run source_maps_app
        end
      end
    end

    def create_source_maps_app
      ::Opal::Sprockets::SourceMapHeaderPatch.inject!(Config::SOURCE_MAP_PREFIX)
      Opal::SourceMapServer.new(@assets_app, Config::SOURCE_MAP_PREFIX)
    end

Should I just remove source_maps_app and maps will be served by assets_app?

New Release

Hello is it possible to issue a new release so the latest changes can get picked up?

Proper version of opal-sprockets in gemspec

Right now I've got version specified like this in my gemspec:

  s.add_dependency 'opal-sprockets'

If I remember correctly we've talked about it. opal-sprockets versions should be fetched automatically.

The problem:

Bundler for some reason uses newest sprockets 4.0.2 and old opal-sprockets 0.0.1.

What version of opal-sprockets should I use in gemspec file?

UPDATE:

Declaring version like this works fine, and allow to choose version automatically. Right?

  s.add_dependency 'opal-sprockets', '> 0.3'

README not work

Following not work in Opal 0.10.4

# config.ru

require 'bundler'
Bundler.require

run Opal::Sprockets::Server.new { |s|
  s.append_path 'app'
  s.main = 'application'

  # This can be used to provide a custom index file.
  # s.index_path = 'my_index.erb'
}

If change Opal::Sprockets::Server to Opal::Server, seem like well fine.

README not clear enough.

Following section:

The opal corelib and runtime can be included in your app simply by adding require "opal". We also need an html file to test the application with, so add index.html:h
....

Please note where this index.html need to create to, I place index.html in project home
directory, it not work.

Sprockets::FileOutsidePaths Error after update opal from 1.3.1 to 1.3.2

Following is error info when run rack test.

Sprockets::FileOutsidePaths: /gems/opal-1.3.2/opal/opal.rb is no longer under a load path: /assets/css, /assets/js, /vendor/assets/materialize-src, /opal-1.3.2/opal, /opal-1.3.2/stdlib, /opal-1.3.2/lib, /ast-2.4.2/lib, /ast-2.4.2/lib, /parser-3.0.3.1/lib, /snabberb-1.5.4/opal, /opal-browser-0.3.1/opal, /paggio-0.3.0/lib
/sprockets-4.0.2/lib/sprockets/loader.rb:156:in load_from_unloaded' /sprockets-4.0.2/lib/sprockets/loader.rb:59:in block in load'
/sprockets-4.0.2/lib/sprockets/loader.rb:337:in fetch_asset_from_dependency_cache' /sprockets-4.0.2/lib/sprockets/loader.rb:43:in load'
/sprockets-4.0.2/lib/sprockets/cached_environment.rb:44:in `load'

It works when i use opal 1.3.1 before, after update to 1.3.2, those error is happen.

Thank you.


@hmdne said:

A known issue, but it's rather an opal-sprockets issue.

You need to erase your cache when gem paths change.

Get many warning "loading in progress, circular require considered harmful" when run test.

Following is output messages when i run rake to run my test, but the test is passing.

home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/cliver-0.3.2/lib/core_ext/file.rb:15: warning: method redefined; discarding old absolute_path?
/home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34: warning: /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34: warning: loading in progress, circular require considered harmful - /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/opal-sprockets-1.0.1/lib/opal/sprockets.rb
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rake-13.0.6/lib/rake/rake_test_loader.rb:6:in  `<main>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rake-13.0.6/lib/rake/rake_test_loader.rb:6:in  `select'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rake-13.0.6/lib/rake/rake_test_loader.rb:21:in  `block in <main>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rake-13.0.6/lib/rake/rake_test_loader.rb:21:in  `require'
        from /home/zw963/Stocks/marketbet_crawler/test/services/latest_institutions_test.rb:1:in  `<top (required)>'
        from /home/zw963/Stocks/marketbet_crawler/test/services/latest_institutions_test.rb:1:in  `require'
        from /home/zw963/Stocks/marketbet_crawler/test/test_helper.rb:13:in  `<top (required)>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rack-2.2.3/lib/rack/builder.rb:66:in  `parse_file'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rack-2.2.3/lib/rack/builder.rb:105:in  `load_file'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rack-2.2.3/lib/rack/builder.rb:116:in  `new_from_string'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rack-2.2.3/lib/rack/builder.rb:116:in  `eval'
        from config.ru:1:in  `block in <main>'
        from config.ru:1:in  `require_relative'
        from /home/zw963/Stocks/marketbet_crawler/config/environment.rb:3:in  `<top (required)>'
        from /home/zw963/.rvm/rubies/ruby-3.0.2/lib/ruby/3.0.0/bundler.rb:174:in  `require'
        from /home/zw963/.rvm/rubies/ruby-3.0.2/lib/ruby/3.0.0/bundler/runtime.rb:50:in  `require'
        from /home/zw963/.rvm/rubies/ruby-3.0.2/lib/ruby/3.0.0/bundler/runtime.rb:50:in  `each'
        from /home/zw963/.rvm/rubies/ruby-3.0.2/lib/ruby/3.0.0/bundler/runtime.rb:61:in  `block in require'
        from /home/zw963/.rvm/rubies/ruby-3.0.2/lib/ruby/3.0.0/bundler/runtime.rb:61:in  `each'
        from /home/zw963/.rvm/rubies/ruby-3.0.2/lib/ruby/3.0.0/bundler/runtime.rb:66:in  `block (2 levels) in require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/opal-sprockets-1.0.1/lib/opal-sprockets.rb:1:in  `<top (required)>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/opal-sprockets-1.0.1/lib/opal/sprockets.rb:4:in  `<top (required)>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/opal-sprockets-1.0.1/lib/opal/sprockets.rb:5:in  `<module:Opal>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/opal-sprockets-1.0.1/lib/opal/sprockets.rb:11:in  `<module:Sprockets>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/opal-sprockets-1.0.1/lib/opal/sprockets/environment.rb:2:in  `<top (required)>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/opal-sprockets-1.0.1/lib/opal/sprockets/processor.rb:6:in  `<top (required)>'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'
        from /home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/zeitwerk-2.4.2/lib/zeitwerk/kernel.rb:34:in  `require'

/home/zw963/Stocks/marketbet_crawler/config/application.rb:9: warning: method redefined; discarding old call
/home/zw963/.rvm/gems/ruby-3.0.2@marketbet_crawler/gems/rack-2.2.3/lib/rack/lint.rb:37: warning: previous definition of call was here

You can check my source code here

https://github.com/zw963/marketbet_crawler/tree/test_opal_sprockets

for run test, you must set following ENVS:

export TEST_DATABASE_URL="sqlite://db/files/marketbet_crawler_test.db"
export APP_SESSION_SECRET="909f017cc94c96f8a1aff843d95920485376f4c997143cc3c39ca945c883ec88e310a2177a69b8b714d22af1b5fd7864833568b6bf93fc3bc811bcf6e112"

Thank you.

uninitialized constant Opal::SprocketsParser

Hey, I have rails 4 project with opal, but when I try to precompile assets, I get following error:

uninitialized constant Opal::SprocketsParser
  (in /project/.bundle/ruby/2.0.0/gems/opal-0.4.4/stdlib/opal-source-maps.js.erb)
/project/.bundle/ruby/2.0.0/gems/opal-0.4.4/stdlib/opal-source-maps.js.erb:2:in `block in singleton class'
/project/.bundle/ruby/2.0.0/gems/opal-0.4.4/stdlib/opal-source-maps.js.erb:-5:in `instance_eval'
/project/.bundle/ruby/2.0.0/gems/opal-0.4.4/stdlib/opal-source-maps.js.erb:-5:in `singleton class'
/project/.bundle/ruby/2.0.0/gems/opal-0.4.4/stdlib/opal-source-maps.js.erb:-7:in `__tilt_13426200'
/project/.bundle/ruby/2.0.0/gems/tilt-1.4.1/lib/tilt/template.rb:170:in `call'
/project/.bundle/ruby/2.0.0/gems/tilt-1.4.1/lib/tilt/template.rb:170:in `evaluate'
/project/.bundle/ruby/2.0.0/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'

Do you know what might be the cause?

Rack Specification update - headers must have lower-case letters

The Rack Specification was updated to state that headers must only use lower-case letters.

This means that now Rack::Lint complains about the Content-Type header - all headers should be updated to only use lower-case letters so that Rack can safely convert them.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.