fkchang / opal-irb

IRB (interactive ruby) for Opal

opal-irb

irb (interactive ruby) for Opal (Ruby running on javascript). This is interactive console (REPL) on a webpage. Good for testing Opal/ruby interactively without having to install anything. Intended to be part of a browser based interactive development tool for Opal

Try it here: http://fkchang.github.io/opal-irb/index-jq.html

Embedded example http://fkchang.github.io/opal-irb/index-embeddable.html

Original https://github.com/larryng/coffeescript-repl based port http://fkchang.github.io/opal-irb/index-homebrew.html

Instructional Media

Videos:

• Overview, no sound http://www.youtube.com/watch?v=6hUwN5BdSHo
• Demo of 1st cut of tab completion https://youtu.be/mQTulgBm5Nk

Blogposts:

• Thorough overview of features including embedded iframe examples of such http://funkworks.blogspot.com/2015/08/an-overview-of-opal-irbs-features.html

Presentations:

• Overview of features based on above blogpost (reveal.js exported by org-mode doc in doc/presentations directory) http://fkchang.github.io/opal-irb/doc/presentations/opal_irb_overview.html

Features

• Opal irb in your browser
• Command history - up/down arrows, ctrl-n/ctrl-p
• Multiline support - ctrl-m to enter editor, ctrl-Enter to submit code
• Colorized output
• Access last returned value via $_
• Shareable code links like this
  • create links by hitting ctrl-L and the lines/multilines will be made into a shareable link
  • also can create links using the history number, i.e. irb_link_for 2
• Emacs keystrokes like all GNU readline apps (original irb included)
• 100% HTML and JavaScript

HOW TOS

Embedding into opal apps

Lissio

Embedding into lissio app, as made by lissio new

• add to Gemfile opal-irb

# gem 'opal-irb', '0.7.0' for Opal 0.7.*
# gem 'opal-irb', '0.8.*' for Opal 0.8.*
# For latest do below
gem 'opal-irb', github: 'fkchang/opal-irb'

• invoke app to require opal-jquery and opal-irb

lissio start --require opal-irb

• add a helper which includes the jquery and codemirror requirements

 <%= OpalIrbUtils.include_opal_irb_jqconsole_requirements %>

• change the require in app/app.rb -- order matters, at the moment to have opal-jquery and opal-browser coexist you need to load opal-jquery before loading lissio

require 'opal'
require 'jqconsole'                     # add these 3 jqconsole support
require 'opal_irb_jqconsole_css'        # css for opal_irb_jqconsole_css
require 'opal_irb_jqconsole'            # the console code
require 'lissio'

• override Application#start() to create a button and hook up opal-irb

  def start
    super
    element << DOM do
      button.show_irb! "Show Irb"
    end

    OpalIrbJqconsole.create_bottom_panel
    OpalIrbJqconsole.add_open_panel_behavior("show_irb")
  end

• profit!

Rails

• setup Rails app for opal use via https://github.com/opal/opal-rails
• add to Gemfile opal-irb, jquery-ui-rails (for multi editor)

    # gem 'opal-irb', '0.7.0' for Opal 0.7.*
    # gem 'opal-irb', '0.8.*' for Opal 0.8.*
    # For latest do below
    gem 'opal-irb', github: 'fkchang/opal-irb', require: 'opal-irb-rails'
    gem 'jquery-ui-rails'

• include stylesheets in application.css.scss

/*= require_self
 *= require jquery-ui/dialog
 *= require opal-irb/jqconsole
 */

• include jquery UI dialog in application.js
  • for Opal 0.7.0 if you have kept application.js vs converting to application.js.rb

//= require jquery-ui/dialog

• for Opal 0.8.0, you must create application.js.rb or else you are forced to load the opal modules by hand

require 'jquery-ui/dialog'

• include codemirror js/css, you can pull from CDN w/the below in your template (haml example below)

= OpalIrbUtils.include_code_mirror.html_safe

• Set it up in opal code

  • Example that creates a bottom panel, a button to bring it up

    require 'opal_irb_jqconsole'

    # opal-browser code to add a button
    $document["#workarea"] << DOM do
      button.show_irb! "Show Irb"
    end
    # opal-jquery code to add a button
    Element.find(".main").append "<button class='btn' id='show_irb'>Show Irb</button>"

    # creates a panel at the bottom
    OpalIrbJqconsole.create_bottom_panel(hidden=true)
    # adds open panel behavior to element w/id show_irb
    OpalIrbJqconsole.add_open_panel_behavior("show_irb")

• Example that creates a bottom panel, makes a hot key "shift-command-c" to toggle the panel

    OpalIrbJqconsole.create_bottom_panel(hidden=true)
    OpalIrbJqconsole.add_hot_key_panel_behavior(modifiers: %w(meta shift), key: "c")

• profit!

Dependencies

• opal - of course
• opal-jquery (would like to do away with this, don't need it)
  • jquery (cuz of the above)
  • jquery-ui dialog - for the code dial
• code mirror - for code editing
• opal-browser (so you can use it from opal-irb) OPTIONAL, it's used in the examples but it can be deployed without opal-browser, esp. since Rails defaults to using jquery and opal-browser and opal-jquery have a lot of overlap, and some small conflicts

Version Scheme

While in my mind there are a lot of things that keep opal-irb at not yet suitable to be a gem/ 0.1.0 version number, I frequently have to change code to support the latest minor release for Opal, so I think I need to adopt a scheme that tracks such. So the 1st gem release will be 0.7.0, to indicate compatibility with 0.7.* versions of opal, followed fairly quickly with a 0.8.0 release to match 0.8.0 the current version (at time of writing) of opal.

Roadmap

• Figure out how to keep variables -- DONE 6/10/2013, thx @adambeynon
• have it automatically know when a complete ruby expression is there instead of multi line mode like irb -- CLOSE ENOUGH 6/21/2013 via jqconsole
• Make a gem - DONE 6/23/2013 1st for use in opal-inspector, made into a bonafide gem 9/1/15
• Hook into smalltalk style object browser for opal that I plan to write - STARTED
• Some demos to show how convenient it can be - DONE 7/19/2013 - you tube video overview
• Add more irb/pry functionality
  • tab completion - DONE
  • cd ls
  • show source via source maps and opal-inspector
• Make embeddable in any app STARTED 7/30/2013, made embeddable into lisso 2/4/2014
• print out inspect in ruby format
• Rails plugin - WORK done on 8/27/14, works w/opal rails and assets, need to document
• navigate stacktrace code via source maps
• remove jquery dependancy -- need to convert jqconsole, and remove the the jquery-ui dialog
• split up dependancy and hierarchy, jquery and jquery free versions, rails vs no rails, etc.

opal-irb's Issues

Loading opal-irb breaks requiring opal

Hey! Found your december presentation and got excited. Trying to get opal-irb working with a simple Sinatra app.

My config.ru is bare bones:

require 'sinatra'

require 'opal'
require 'opal-irb'

map '/assets' do
  env = Opal::Environment.new
  env.append_path 'app'
  run env
end

get '/' do
  <<-HTML
    <!doctype html>
    <html>
      <head>
        #{OpalIrbUtils.include_opal_irb_jqconsole_requirements}
        <script src='/assets/application.js'></script>
      </head>
      <body>
        <div id='console'></div>
      </body>
    </html>
  HTML
end

run Sinatra::Application

With that in place, whenever I do require 'opal' in my application.rb (its entire contents) I see the following in console:

Uncaught TypeError: Cannot call method '$-' of null application.js:21786

The surrounding js code is:

//# sourceMappingURL=/__opal_source_maps__/opal_irb.js.map
;
/* Generated by Opal 0.6.0 */
(function($opal) {
  var self = $opal.top, $scope = $opal, nil = $opal.nil, $breaker = $opal.breaker, $slice = $opal.slice, $klass = $opal.klass, $hash2 = $opal.hash2, $range = $opal.range, $gvars = $opal.gvars;
  $opal.add_stubs(['$map', '$-', '$width', '$value', '$html', '$height', '$+', '$gsub', '$attr_reader', '$clone', '$new', '$on', '$handle_keypress', '$initialize_window', '$print_header', '$html=', '$inspect', '$unshift', '$==', '$[]', '$add_to_history', '$parse', '$log', '$===', '$backtrace', '$join', '$print', '$each_with_index', '$reverse', '$which', '$prevent_default', '$value=', '$escape_html', '$add_to_saved', '$!', '$process_saved', '$open_multiline_dialog', '$show_previous_history', '$show_next_history', '$ctrl_key', '$<', '$length', '$>', '$resize_input', '$focus', '$each', '$find', '$create_html', '$setup_cmd_line_methods', '$scroll_to_bottom', '$setup_multi_line', '$setValue', '$call', '$sub', '$getValue']);
  ;
  ;
  ;
  return (function($base, $super) {
    function $OpalIRBHomebrewConsole(){};
    var self = $OpalIRBHomebrewConsole = $klass($base, $super, 'OpalIRBHomebrewConsole', $OpalIRBHomebrewConsole);

    var def = self._proto, $scope = self._scope;
    def.settings = def.inputdiv = def.inputl = def.input = def.inputcopy = def.prompt = def.output = def.history = def.multiline = def.saved = def.irb = def.historyi = def.editor = def.open_editor_dialog_function = nil;
    def.$reset_settings = function() {
      var self = this;
      return localStorage.clear();
    };

    def.$save_settings = function() {
      var self = this;
      return localStorage.settings = JSON.stringify( self.settings.$map());
    };

    def.$resize_input = function(e) {
      var self = this, width = nil, content = nil;
// ERROR HERE:
      width = self.inputdiv.$width()['$-'](self.inputl.$width());
      content = self.input.$value();
      self.inputcopy.$html(content);
      self.inputcopy.$width(width);
      self.input.$width(width);
      return self.input.$height(self.inputcopy.$height()['$+'](2));
    };
// ...

I'm totally new to the Opal environment, so I may be doing something wrong, but without the require 'opal-irb' and OpalIrbUtils.include_opal_irb_jqconsole_requirements all things Opal seem to work.

Support more shortcuts

Support these additional shortcuts:

• alt-left (go to beginning of word)
• alt-right (go to end of word)
• ctrl-w / alt-backspace (rub-out to beginning of word like ctrl-backspace)
• ctrl-u (delete all text before cursor)

Note that alt-right should go to end of word, and not the beginning of next word (current ctrl-right behavior).

Earhorn

Thought that this was an interesting potential feature for opal-irb: https://github.com/omphalos/earhorn

Slightly reminds me of my days using DDD.

Feature request: support require

I opened a similar pull request against opal's main repo here: opal/opal#306. I'd really love to be able to have a web IRB console that could also include at the very least, the core Ruby libs like date, etc.

http://fkchang.github.io/opal-irb/index-jq.html no longer seems to work

http://fkchang.github.io/opal-irb/index-jq.html no longer seems to work

I tried it in chromium just now but I can not input anything.

why not releasing it as a gem on rubygems.org

Found this is useful but it's a pity that it's not a released gem

Current Version

@fkchang just curious, is opal-irb still being updated to work with newer opal? Thanks!

wrap long lines

Go to the live demo and type methods, you'll get a long line that causes a horizontal scrollbar to appear.

Long lines should be wrapped.

Escape key doesn't start multiline mode

Pressing escape doesn't cause the app to behave any differently than not pressing it. The effect is that multiline mode cannot be entered.

Output from Firefox 35.0.1 on Windows 7

opal> def foo
FOR:

============

Output from Chrome 39.0.2171.95 (64-bit) on Linux Mint 17

opal> def foo
FOR:

============
SyntaxError: unexpected 'false'
    at OpalClass.$new (http://fkchang.github.io/opal-irb/compiled/application.js:3123:15)
    at $Parser.def.$raise (http://fkchang.github.io/opal-irb/compiled/application.js:2800:31)
    at $Parser.def.$_racc_do_parse_rb (http://fkchang.github.io/opal-irb/compiled/application.js:16902:16)
    at $Parser.def.$do_parse (http://fkchang.github.io/opal-irb/compiled/application.js:16796:21)
    at $Parser.def.$parse_to_sexp (http://fkchang.github.io/opal-irb/compiled/application.js:19564:23)
    at $Parser.def.$parse (http://fkchang.github.io/opal-irb/compiled/application.js:19547:23)
    at $Compiler.def.$compile (http://fkchang.github.io/opal-irb/compiled/application.js:25425:56)
    at $OpalIrb.def.$parse (http://fkchang.github.io/opal-irb/compiled/application.js:25928:103)
    at $OpalIRBHomebrewConsole.def.$process_saved (http://fkchang.github.io/opal-irb/compiled/application.js:26054:27)
    at http://fkchang.github.io/opal-irb/compiled/application.js:26102:23

Ruby initialize method not throwing wrong number of arguments error

I have setup IRB for my rails application
I have used following gems

gem 'sprockets-rails', '<= 3.0.0'
gem 'opal'
gem 'opal-rails', '0.8.0'
gem 'opal-jquery'
gem 'opal-browser'
gem 'opal-irb', github: 'fkchang/opal-irb', require: 'opal-irb-rails'

When I create a class with initialize method like given below

class Test
  def initialize(a)
    puts a
  end
end

Now, I call it like Test.new

It should throw error for wrong number of arguments but it is not throwing.

Here is the screenshot,

Here is the link to my heroku app where I have set it. Heroku Demo app

Update to worked with opal-rails 0.9.2

opal-rails 0.9.2 released, which Added support for sprockets-rails v3.

current opal-irb need old version to start.

Could not find a valid gem 'lissio' (>= 0) in any repository

Where can I find lasso gem?

require_js should return a promise and accept a block, and accept multple urls

i.e.

require_js "some_url" do |status|
  puts "some_url finally got loaded"
end

or as a promise

require_js("some_url").then do
   ...
end

which allows for waiting on multiple requires

Promise.when(
  require_js("url 1"),
  require_js("url 2")
).then do
  ...
end

but this would be even nicer:

require_js "url 1", "url 2", "url 3" do
end

Class Browser tabs and so on...

Class Browser opal console

Forrest Chang
For this demo, I just wrote it by hand w/opal-jquery. I will be restarting this with hyper-react (idiomatic Opal wrapper on react.js ), when I have something I'll share w/you, what's the best way to contact you