opal-browser 0.2.0.beta1 → 0.3.2

data/examples/2048/app/application.rb

@@ -0,0 +1,169 @@
+require 'opal'
+require 'native'
+require 'promise'
+require 'browser/setup/full'
+
+class Game
+  def initialize
+    @grid = ([[nil] * 4] * 4).map(&:dup)
+
+    2.times { add_field }
+  end
+
+  attr_reader :grid
+
+  def lost?
+    @grid.all? { |row| row.all? } && !(begin
+      (0..2).any? do |y|
+        (0..3).any? do |x|
+          @grid[y][x] == @grid[y+1][x]
+        end
+      end
+    end || begin
+      (0..3).any? do |y|
+        (0..2).any? do |x|
+          @grid[y][x] == @grid[y][x+1]
+        end
+      end
+    end)
+  end
+
+  def won?
+    @grid.any? { |row| row.any? { |f| f == 2048 } }
+  end
+
+  def add_field
+    return if lost? or won?
+
+    y,x = nil
+
+    loop do
+      y,x = random_field
+      break unless @grid[y][x]
+    end
+
+    @grid[y][x] = [2,4].sample
+  end
+
+  def shake(dir)
+    grid = @grid
+    conversion = proc {}
+    back_conversion = nil
+
+    case dir
+    when :left
+    when :right
+      conversion = proc { grid = grid.map(&:reverse) }
+    when :top
+      conversion = proc { grid = grid.transpose }
+    when :bottom
+      conversion = proc do
+        grid = grid.transpose
+        grid = grid.map(&:reverse)
+      end
+
+      back_conversion = proc do
+        grid = grid.map(&:reverse)
+        grid = grid.transpose
+      end
+    end
+
+    back_conversion ||= conversion
+
+    conversion.()
+
+    grid = grid.map do |row|
+      row = row.compact
+      (0..2).each do |x|
+        if row[x] && row[x+1] && row[x] == row[x+1]
+          row[x], row[x+1] = row[x] + row[x+1], nil
+        end
+      end
+      row = row.compact
+      row = (row + [nil]*4)[0..3]
+    end
+
+    back_conversion.()
+
+    changed = grid != @grid
+
+    @grid = grid
+
+    add_field if changed && !lost?
+  end
+
+  private
+
+  def random_field
+    [rand(4), rand(4)]
+  end
+end
+
+def render(game)
+  $document[:arena].inner_dom { |b|
+    (0..3).each do |y|
+      b.tr {
+        (0..3).each do |x|
+          b.td(class: "f_"+(game.grid[y][x] || "nil").to_s) {
+            (game.grid[y][x] || "").to_s
+          }
+        end
+      }
+    end
+  }
+end
+
+$document.head << DOM("<style>
+  #arena {
+    border-collapse: separate;
+    border-spacing: 4px;
+  }
+  #arena td {
+    width: 150px;
+    height: 150px;
+    border: 2px solid black;
+    font-size: 50px;
+    vertical-align: middle;
+    text-align: center;
+  }
+  #arena .f_2    { background-color: #eff; }
+  #arena .f_4    { background-color: #eef; }
+  #arena .f_8    { background-color: #def; }
+  #arena .f_16   { background-color: #dee; }
+  #arena .f_32   { background-color: #ded; }
+  #arena .f_64   { background-color: #ced; }
+  #arena .f_128  { background-color: #cdd; }
+  #arena .f_256  { background-color: #cdc; }
+  #arena .f_512  { background-color: #bdc; }
+  #arena .f_1024 { background-color: #bcc; }
+  #arena .f_2048 { background-color: #bbc; }
+</style>")
+$document.body << DOM("<div id='arena'></div>")
+
+$game = game = Game.new
+render(game)
+
+$document.on(:keydown) do |e|
+  case e.key
+  when :ArrowUp
+    game.shake(:top)
+  when :ArrowDown
+    game.shake(:bottom)
+  when :ArrowLeft
+    game.shake(:left)
+  when :ArrowRight
+    game.shake(:right)
+  end
+
+  render(game)
+
+  if game.lost?
+    alert "You lost!"
+    game = Game.new
+  elsif game.won?
+    alert "You won!"
+    game = Game.new
+  end
+
+  render(game)
+end

data/examples/2048/config.ru

@@ -0,0 +1,9 @@
+require "opal-browser"
+require "opal-sprockets"
+
+run Opal::Sprockets::Server.new { |s|
+  s.main = 'application'
+  s.append_path 'app'
+  #s.index_path = 'index.html.erb'
+  s.debug = true
+}

data/examples/canvas/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+gem "opal-sprockets"
+gem "puma"
+gem "rack"
+gem "opal-browser", path: "../.."

data/examples/canvas/README.md

@@ -0,0 +1,9 @@
+Example canvas application
+==========================
+
+This is a loose port of https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
+
+To launch, run:
+
+    $ bundle install
+    $ bundle exec rackup

data/examples/canvas/app/application.rb

@@ -0,0 +1,55 @@
+require 'opal'
+require 'native'
+require 'promise'
+require 'browser/setup/full'
+
+$document.head << CSS {
+  rule("body") {
+    margin 0
+    padding 0
+    overflow :hidden
+  }
+}
+
+c = Browser::Canvas.new($window.view.width, $window.view.height)
+$document.body << c
+
+$window.on :resize do |e|
+  c.height = $window.view.height
+  c.width = $window.view.width
+end
+
+# A port of https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
+
+is_drawing = false
+x, y = 0, 0
+y = 0
+
+c.on :mousedown do |e|
+  x, y = e.offset.x, e.offset.y
+  is_drawing = true
+end
+
+c.on :mousemove do |e|
+  if is_drawing
+    draw_line(c, x, y, e.offset.x, e.offset.y)
+    x, y = e.offset.x, e.offset.y
+  end
+end
+
+$window.on :mouseup do |e|
+  if is_drawing
+    draw_line(c, x, y, e.offset.x, e.offset.y)
+    x, y = e.offset.x, e.offset.y
+    is_drawing = false
+  end
+end
+
+def draw_line(c, x1, y1, x2, y2)
+  c.path do
+    c.style.stroke = :black
+    c.style.line.width = 1
+    c.line(x1, y1, x2, y2)
+    c.stroke
+  end
+end

data/examples/canvas/config.ru

@@ -0,0 +1,9 @@
+require "opal-browser"
+require "opal-sprockets"
+
+run Opal::Sprockets::Server.new { |s|
+  s.main = 'application'
+  s.append_path 'app'
+  #s.index_path = 'index.html.erb'
+  s.debug = true
+}

data/examples/component/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+gem "opal-browser", path: "../.."
+gem "opal-sprockets"
+gem "rack"
+gem "puma"

data/examples/component/README.md

@@ -0,0 +1,10 @@
+Custom element example
+======================
+
+This is a rather technical example on how to use custom elements with
+Opal-Browser.
+
+To run, simply execute:
+
+    $ bundle install
+    $ bundle exec rackup

data/examples/component/app/application.rb

@@ -0,0 +1,66 @@
+require "opal"
+require "console"
+require "promise"
+require "browser/setup/full"
+
+# Let's test some element before we have been initialized.
+# This is so we can test the upgrading behavior.
+$document.body << $document.create_element("app-mycounter")
+
+d = DOM("<div>")
+$document.body << d
+d.inner_html = "<app-mycounter>"
+
+class MyCounter < Browser::DOM::Element::Custom
+  # Custom Element interface:
+
+  self.observed_attributes = %w[value]
+
+  def initialize(node)
+    super
+  end
+
+  def attached
+    self[:value] ||= "0"
+    on :click do
+      increase!
+    end
+    render  
+  end
+
+  def detached
+    off :click
+  end
+
+  def attribute_changed(attr, from, to)
+    render
+  end
+
+  # Our interface:
+
+  def increase!
+    self[:value] = (self[:value].to_i + 1)
+  end
+
+  # Private:
+
+  def render
+    self.inner_html = "<h1>[#{self[:value]}]</h1>"
+  end
+
+  # This should come after the methods have been defined.
+  def_custom "app-mycounter"
+end
+
+$document.body << DOM("<app-mycounter></app-mycounter>")
+$document.body << $document.create_element("app-mycounter")
+$document.body << MyCounter.new
+$document.body << DOM { e('app-mycounter') }
+
+all = DOM("<h1>Increase all!</h1>")
+all.on(:click) do
+  $document.css("app-mycounter").each do |c|
+    c.increase!
+  end
+end
+$document.body << all

data/examples/component/config.ru

@@ -0,0 +1,9 @@
+require "opal-browser"
+require "opal-sprockets"
+
+run Opal::Sprockets::Server.new { |s|
+  s.main = 'application'
+  s.append_path 'app'
+  #s.index_path = 'index.html.erb'
+  s.debug = true
+}

data/examples/integrations/README.md

@@ -0,0 +1,24 @@
+Integrations
+============
+
+It's possible to combine Opal-Browser with a lot of different workflows. Some are
+better than others, but some are more suited at certain applications.
+
+If you plan to do a static website, possibly you would like to base your work on
+some static-* template. The downside is that you will need to recompile your work
+each time you change something (except for static-rake-guard and
+static-bash-opal-parser which is interesting only from experimentation viewpoint).
+
+The dynamic-* templates will most of the time allow you to create a website with
+both a frontend and a backend (some, like dynamic-rack-opal-sprockets-server won't
+make your life easy though).
+
+The sprockets integrations have a unique property, that you can name files like
+`file.rb.erb` and then they will be preprocessed by ERB.
+
+This directory is meant in general as a guideline, so the examples are as brief
+as possible. I took a lot of time trying to understand how to integrate Opal, so
+you can treat this directory as a library of my knowledge that you will be able
+to use to get to use Opal as soon as possible!
+
+TODO: dynamic-rails-opal-rails-with-sprockets

data/examples/integrations/dynamic-rack-opal-sprockets-server/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+gem "opal-sprockets"
+gem "puma"
+gem "rack"
+gem "opal-browser", path: "../../.."

data/examples/integrations/dynamic-rack-opal-sprockets-server/README.md

@@ -0,0 +1,16 @@
+Dynamic Opal-Browser integration with Rack via Opal-Sprockets-Server
+====================================================================
+
+To install, run:
+
+    $ bundle install
+
+Development mode
+----------------
+
+    $ bundle exec rackup
+
+Production mode
+---------------
+
+Left as an exercise for the reader. In general - don't do it. Use some more robust integration.

data/examples/integrations/dynamic-rack-opal-sprockets-server/app/application.rb

@@ -0,0 +1,6 @@
+require 'opal'
+require 'native'
+require 'promise'
+require 'browser/setup/full'
+
+$document.body << "Hello world!"

data/examples/integrations/dynamic-rack-opal-sprockets-server/config.ru

@@ -0,0 +1,9 @@
+require "opal-browser"
+require "opal-sprockets"
+
+run Opal::Sprockets::Server.new { |s|
+  s.main = 'application'
+  s.append_path 'app'
+  #s.index_path = 'index.html.erb'
+  s.debug = true
+}

data/examples/integrations/dynamic-roda-roda-sprockets/.gitignore

@@ -0,0 +1 @@
+public/assets

data/examples/integrations/dynamic-roda-roda-sprockets/Gemfile

@@ -0,0 +1,7 @@
+source "https://rubygems.org"
+
+gem "opal-sprockets"
+gem "roda-sprockets", ">= 2.0.0a"
+gem "puma"
+gem "rake"
+gem "opal-browser", path: "../../.."

data/examples/integrations/dynamic-roda-roda-sprockets/README.md

@@ -0,0 +1,22 @@
+Dynamic Opal-Browser integration with Roda via Roda-Sprockets
+=============================================================
+
+To install, run:
+
+    $ bundle install
+
+Development mode
+----------------
+
+    $ bundle exec rackup
+
+Production mode
+---------------
+
+    $ bundle exec rake assets:precompile
+    $ RACK_ENV=production bundle exec rackup
+
+See more:
+---------
+
+https://github.com/hmdne/roda-sprockets

data/examples/integrations/dynamic-roda-roda-sprockets/Rakefile

@@ -0,0 +1,4 @@
+require_relative 'app'
+require 'roda/plugins/sprockets_task'
+
+Roda::RodaPlugins::Sprockets::Task.define!(App)

data/examples/integrations/dynamic-roda-roda-sprockets/app/application.rb

@@ -0,0 +1,6 @@
+require 'opal'
+require 'native'
+require 'promise'
+require 'browser/setup/full'
+
+$document.body << "Hello world!"

data/examples/integrations/dynamic-roda-roda-sprockets/app.rb

@@ -0,0 +1,32 @@
+require 'roda'
+require 'opal-browser'
+
+class App < Roda
+  plugin :sprockets, precompile: %w(application.js),
+                     prefix: %w(app/),
+                     root: __dir__,
+                     public_path: 'public/assets/',
+                     opal: true,
+                     debug: ENV['RACK_ENV'] != 'production'
+  plugin :public
+
+  route do |r|
+    r.public
+    r.sprockets
+
+    r.root do
+      <<~END
+	      <!doctype html>
+        <html>
+          <head>
+            <title>My application</title>
+          </head>
+          <body>
+            #{ javascript_tag 'application' }
+            #{ opal_require 'application' }
+          </body>
+        </html>
+      END
+    end
+  end
+end

data/examples/integrations/dynamic-roda-roda-sprockets/config.ru

@@ -0,0 +1,3 @@
+require_relative "./app"
+
+run App.app

data/examples/integrations/dynamic-roda-tilt/.gitignore

@@ -0,0 +1 @@
+public/assets

data/examples/integrations/dynamic-roda-tilt/Gemfile

@@ -0,0 +1,8 @@
+source "https://rubygems.org"
+
+gem "opal-sprockets"
+gem "roda-sprockets"
+gem "puma"
+gem "rake"
+gem "opal-browser", path: "../../.."
+gem "sassc"

data/examples/integrations/dynamic-roda-tilt/README.md

@@ -0,0 +1,17 @@
+Dynamic Opal-Browser integration with Roda via Tilt
+===================================================
+
+To install, run:
+
+    $ bundle install
+
+Development mode
+----------------
+
+    $ bundle exec rackup
+
+Production mode
+---------------
+
+    $ RACK_ENV=production bundle exec rake assets
+    $ RACK_ENV=production bundle exec rackup

data/examples/integrations/dynamic-roda-tilt/Rakefile

@@ -0,0 +1,6 @@
+desc "Recompile assets"
+task "assets" do
+  ENV['RACK_ENV'] = 'production'
+  require_relative 'app'
+  App.compile_assets
+end

data/examples/integrations/dynamic-roda-tilt/app/application.rb

@@ -0,0 +1,6 @@
+require 'opal'
+require 'native'
+require 'promise'
+require 'browser/setup/full'
+
+$document.body << "Hello world!"

data/examples/integrations/dynamic-roda-tilt/app.rb

@@ -0,0 +1,50 @@
+require 'roda'
+require 'tilt/sass'
+require 'tilt/opal'
+require 'opal/builder_processors'
+require 'opal-browser'
+
+class OpalBuilder < Opal::Builder
+  attr_accessor :build_source_map
+
+  def to_s
+    if @build_source_map
+      super + "\n" + source_map.to_data_uri_comment
+    else
+      super
+    end
+  end
+end
+
+class App < Roda
+  js_builder = OpalBuilder.new(stubs: []) #'opal'
+  js_builder.build_source_map = ENV['RACK_ENV'] == 'development'
+  js_builder.append_paths('app')
+
+  plugin :assets, js: ['application.rb'],
+                  js_opts: { builder: js_builder },
+                  path: '.',
+                  js_dir: 'app',
+                  timestamp_paths: true,
+                  precompiled: ENV['RACK_ENV'] != 'development' ? 'public/assets/assets-precompiled.json' : nil
+  plugin :public
+
+  route do |r|
+    r.public
+    r.assets
+
+    r.root do
+      <<~END
+	      <!doctype html>
+        <html>
+          <head>
+            <title>My application</title>
+          </head>
+          <body>
+            #{ assets :js }
+          </body>
+        </html>
+      END
+    end
+  end
+end

data/examples/integrations/dynamic-roda-tilt/config.ru

@@ -0,0 +1,3 @@
+require_relative "./app"
+
+run App.app

data/examples/integrations/dynamic-sinatra-opal-sprockets-server/Gemfile

@@ -0,0 +1,7 @@
+source "https://rubygems.org"
+
+gem "opal-sprockets"
+gem "puma"
+gem "rake"
+gem "sinatra"
+gem "opal-browser", path: "../../.."

data/examples/integrations/dynamic-sinatra-opal-sprockets-server/README.md

@@ -0,0 +1,16 @@
+Dynamic Opal-Browser integration with Sinatra via Opal-Sprockets-Server
+=======================================================================
+
+To install, run:
+
+    $ bundle install
+
+Development mode
+----------------
+
+    $ bundle exec rackup
+
+Production mode
+---------------
+
+Left as an exercise for the reader.

data/examples/integrations/dynamic-sinatra-opal-sprockets-server/app/application.rb

@@ -0,0 +1,6 @@
+require 'opal'
+require 'native'
+require 'promise'
+require 'browser/setup/full'
+
+$document.body << "Hello world!"

data/examples/integrations/dynamic-sinatra-opal-sprockets-server/config.ru

@@ -0,0 +1,29 @@
+require 'opal-sprockets'
+require 'opal-browser'
+require 'sinatra'
+
+opal = Opal::Sprockets::Server.new {|s|
+  s.append_path 'app'
+  s.main = 'application'
+  s.debug = ENV['RACK_ENV'] != 'production'
+}
+
+map '/assets' do
+  run opal.sprockets
+end
+
+get '/' do
+  <<-HTML
+    <!doctype html>
+    <html>
+      <head>
+        <title>My Application</title>
+      </head>
+      <body>
+        #{ Opal::Sprockets.javascript_include_tag('application', debug: opal.debug, sprockets: opal.sprockets, prefix: 'assets/' ) }
+      </body>
+    </html>
+  HTML
+end
+
+run Sinatra::Application