opal-browser 0.1.0.beta1 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 67a9bf1ea4b1b5b2f0b9850b39a8e7da1b464806
-  data.tar.gz: 021fa0a9e5ed6d1ab1b3d64f85d68c4860696c79
+SHA256:
+  metadata.gz: 0a728e0d53d58c89018baa0d46dbc4731da85966b7fb5b7b312f4bb24d9dc23f
+  data.tar.gz: 7219cd2463a99d60f4f39b19045ab3ebf22b254a62f82c4684bd3023ad7548e4
 SHA512:
-  metadata.gz: 7fc4300cbb533f11e140ea654de6bf4742bbfca85041d6f6e2bc3f69cb352c4ff20e4cc42c54ffa15320e53ae094abb502b52d023e8701581caec38e53a6dba2
-  data.tar.gz: 3d27cd50d48f61dc21a4d838d502e212ff0e25ff8cfb2e8db264b439068a14f79a4d19630ac64f173c2d48d6ac1969e45aabd75c2c29349d114672fece6fe0b2
+  metadata.gz: a04d4225b59e9e3d244bfa748d931bc3954946c9de3e6f4623115494e00e54a8a5c3e90bf7fe679b71d1ebc74b7318c18f422014775059ca457bcd1cf872f250
+  data.tar.gz: 194e860d12c4e737593bc1888cff156fccfc94d13b20faf8ec26b12ed9a1d26d43ad960b21fb88a6605a5b8c20b8b2d4c239dec4a52013b87d1ab7ec9649c372

data/.github/workflows/build.yml

@@ -0,0 +1,95 @@
+name: build
+
+on:
+  push:
+    branches:
+      - master
+      - "*-stable"
+      - "*/ci-check"
+  pull_request: {}
+
+jobs:
+  rake:
+    name: ${{ matrix.combo.name }}
+    strategy:
+      fail-fast: false
+      matrix:
+        combo:
+          - name: Chromium/Linux/Opal-master
+            browser: chrome
+            os: ubuntu-latest
+            opal: master
+          - name: Chromium/Linux/Opal-1.3/PromiseV2
+            browser: chrome
+            os: ubuntu-latest
+            opal: 1.3
+            promise: v2
+          - name: Chromium/Linux/Opal-1.3
+            browser: chrome
+            os: ubuntu-latest
+            opal: 1.3
+          - name: Chromium/Linux/Opal-1.2
+            browser: chrome
+            os: ubuntu-latest
+            opal: 1.2
+          - name: Chromium/Linux/Opal-1.0
+            browser: chrome
+            os: ubuntu-latest
+            opal: '1.0'
+          - name: Chromium/Linux/Ruby-2.7
+            browser: chrome
+            os: ubuntu-latest
+            ruby: 2.7
+          - name: Chromium/Linux/Ruby-2.6
+            browser: chrome
+            os: ubuntu-latest
+            ruby: 2.6
+          - name: Firefox/Linux
+            browser: gecko
+            os: ubuntu-latest
+          - name: Chromium/Windows
+            browser: chrome
+            os: windows-latest
+          - name: Firefox/Windows
+            browser: gecko
+            os: windows-latest
+          - name: Edge/Windows
+            browser: edge
+            os: windows-latest
+          - name: Chromium/macOS
+            browser: chrome
+            os: macos-latest
+          - name: Firefox/macOS
+            browser: gecko
+            os: macos-latest
+          - name: Safari/macOS
+            browser: safari
+            os: macos-latest
+
+    runs-on: ${{ matrix.combo.os }}  
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: set environment variables
+        run: |
+          echo "OPAL_VERSION=${{ matrix.combo.opal || '1.3' }}" >> $GITHUB_ENV
+          echo "OPAL_BROWSER_PROMISE=${{ matrix.combo.promise || 'v1' }}" >> $GITHUB_ENV
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: ${{ matrix.combo.ruby || '3.0' }}
+      - run: bundle lock
+      - uses: actions/cache@v2
+        with:
+          path: ./vendor/bundle
+          key: ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.2.0.beta1' }}-${{ github.ref }}-${{ hashFiles('**/Gemfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.2.0.beta1' }}-${{ github.ref }}
+            ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.2.0.beta1' }}-master
+            ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.2.0.beta1' }}-
+            ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-
+      - name: bundle install
+        run: |
+          bundle config path $PWD/vendor/bundle
+          bundle install --jobs 4 --retry 3
+          bundle clean
+      - run: bundle exec rake selenium_${{ matrix.combo.browser }}

data/.gitignore

@@ -3,3 +3,6 @@ vendor
 .bundle
 copycat
 doc
+.yardoc
+screenshot.png
+/pkg

data/.yardopts

@@ -1 +1 @@
---no-private opal/**/*.rb
+--no-private opal/**/*.rb --markup markdown

data/Gemfile

@@ -1,11 +1,30 @@
 source 'https://rubygems.org'
 gemspec
 
+# specs
 gem 'rake'
 gem 'rack'
 gem 'sinatra'
 gem 'sinatra-websocket'
+# For opal-rspec, a release is needed
+gem 'opal-rspec', github: 'hmdne/opal-rspec', branch: 'opal-1.3', submodules: true # '>= 0.8.0.alpha1'
+gem 'opal-sprockets'
+# Force build of eventmachine on Windows
+gem 'eventmachine', github: 'eventmachine/eventmachine' if RUBY_PLATFORM =~ /mingw/
+
+
+# runner
+gem 'selenium-webdriver', require: false
+gem 'rest-client', require: false
+gem 'webdrivers', require: false
+gem 'rexml', require: false
+
+# browser
+case ENV['OPAL_VERSION']
+when nil
+when /\./
+  gem 'opal', "~> #{ENV['OPAL_VERSION']}.0a"
+else
+  gem 'opal', github: 'opal/opal', ref: ENV['OPAL_VERSION']
+end
 
-gem 'opal', github: 'opal/opal'
-gem 'opal-rspec', '0.3.0.beta2'
-gem 'paggio', github: 'meh/paggio'

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright (C) 2013-2018 by meh
+Copyright (C) 2019-2021 hmdne and the Opal-Browser 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.

data/README.md

@@ -1,11 +1,81 @@
-Browser support for Opal
-========================
-This library aims to be a full-blown wrapper for all the browser API including
+Opal-Browser - Client side web development in pure Ruby, using Opal
+===================================================================
+
+[![Gem Version](https://badge.fury.io/rb/opal-browser.svg)](http://badge.fury.io/rb/opal-browser)
+[![Code Climate](https://img.shields.io/codeclimate/maintainability-percentage/opal/opal-browser.svg)](https://codeclimate.com/github/opal/opal-browser)
+[![Build Status](https://github.com/opal/opal-browser/workflows/build/badge.svg)](https://github.com/opal/opal-browser/actions?query=workflow%3Abuild)
+
+This library aims to be a full-blown wrapper for all the browser API as defined by
 HTML5.
 
+It provides a very JQuery-like interface to DOM, but itself it doesn't use nor
+require JQuery nor opal-jquery (which is an alternative library for interfacing
+the web browser). The main difference though is that Opal-Browser goes far beyond
+what JQuery does.
+
+Usage
+=====
+
+_Gemfile_
+
+```ruby
+source 'https://rubygems.org/'
+
+gem 'opal-browser'
+```
+
+_Server side (config.ru, Rakefile, Rails, Sinatra, Roda, etc. - not needed for static compilation)_
+
+```ruby
+require 'opal-browser'
+# Your server code here
+```
+
+_Browser side_
+
+```ruby
+require 'opal'
+require 'native'
+require 'promise'
+require 'browser/setup/full'
+
+# Your Opal code here
+$document.body << "Hello world!"
+```
+
+_Static Compile Opal + Opal-Browser library_
+
+```bash
+bundle exec opal -c -q opal-browser -p native -p promise -p browser/setup/full -e '#' -E > opal-browser.js
+```
+
+_Static Compile your application_
+
+```bash
+bundle exec opal -Oc -s opal -s native -s promise -s browser/setup/full app/application.rb > application.js
+```
+
+_And load it in HTML!_
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Application</title>
+</head>
+<body>
+  <script src='opal-browser.js' onload='Opal.require("native"); Opal.require("promise"); Opal.require("browser/setup/full");'></script>
+  <script src='application.js'></script>
+</body>
+</html>
+```
+
+See the examples/integrations/ directory for various ideas on how to quickly start
+development using opal-browser.
+
 Features
 ========
-This is a list of the currently wrapped features and some details on them.
+This is a list of many currently wrapped features and some details on them.
 
 DOM
 ---
@@ -13,16 +83,16 @@ DOM support is complete as far as I know, it has a very Nokogiri feel to it
 with obvious differences where relevant (for instance, event handling).
 
 ```ruby
-$document.on :load do
+$document.ready do
   alert "yo dawg, I'm all loaded up in here"
 end
 ```
 
-It also supports a markaby inspired builder DSL which generates DOM nodes
-directly instead of creating a string.
+It also supports a markaby inspired builder DSL (using Paggio) which generates
+DOM nodes directly instead of creating a string.
 
 ```ruby
-$document.on :load do
+$document.ready do
   DOM {
     div.info {
       span.red "I'm all cooked up."
@@ -31,12 +101,37 @@ $document.on :load do
 end
 ```
 
+Events
+------
+
+Add an event to a given element:
+
+```ruby
+$document.at_css("button").on(:click) do |e|
+  e.prevent # Prevent the default action (eg. form submission)
+  alert "Button clicked!"
+end
+```
+
+Or add it to a parent element and use a delegator, so that an event gets fired
+when any button children of `$document` is clicked:
+
+```ruby
+$document.on(:click, "button") do |e|
+  e.prevent
+  # e.on is a button that has been clicked
+  e.on.inner_text = "Clicked!"
+end
+```
+
+Run an event once with `#one` instead of `#on`, or disable an event with `#off`.
+
 CSSOM
 -----
-CSSOM support is still incomplete but the useful parts are implemented, this
-includes a DSL for generating a CSS style and the same DSL is also used to
-change style declarations (which can either belong to a `DOM::Element` or a
-`CSS::Rule::Style`).
+CSSOM support (using Paggio) is still incomplete but the useful parts are
+implemented, this includes a DSL for generating a CSS style and the same DSL
+is also used to change style declarations (which can either belong to a
+`DOM::Element` or a `CSS::Rule::Style`).
 
 ```ruby
 $document.body.style.apply {
@@ -54,6 +149,8 @@ supports binary results as typed-arrays.
 It easily allows for synchronous and asynchronous requests.
 
 ```ruby
+require 'browser/http'
+
 Browser::HTTP.get "/something.json" do
   on :success do |res|
     alert res.json.inspect
@@ -67,6 +164,8 @@ Websockets have been fully wrapped and they are easily configurable with
 blocks.
 
 ```ruby
+require 'browser/socket'
+
 Browser::Socket.new 'ws://echo.websocket.org' do
   on :open do
     every 1 do
@@ -84,6 +183,20 @@ EventSource
 -----------
 Event sources have been implemented and are easily configurable with blocks.
 
+```ruby
+require 'browser/event_source'
+
+Browser::EventSource.new '/events' do |es|
+  es.on :message do |e|
+    alert e.data
+  end
+
+  es.on :custom do |e|
+    alert "custom #{e.data}"
+  end
+end
+```
+
 History
 -------
 The HTML5 History API has been fully wrapped.
@@ -93,14 +206,81 @@ Storage
 The HTML5 Storage API has been wrapped and it exports a single Storage class
 that uses the most appropriate and available API to store data locally.
 
-Cross-browser compatibility
-===========================
-Right now all features are implemented with the stable or working-drafts API
-which aren't implemented everywhere.
+```ruby
+require 'browser/storage'
+
+$storage = $window.storage
+$storage[:hello] = "world"
+```
+
+Database SQL
+------------
+WebSQL has been fully wrapped (Chromium-only)
+
+```ruby
+require 'browser/database/sql'
+
+db = Browser::Database::SQL.new 'test'
+db.transaction {|t|
+  t.query('CREATE TABLE test(ID INTEGER PRIMARY KEY ASC, text TEXT)').then {
+    t.query('INSERT INTO test (id, text) VALUES(?, ?)', 1, 'huehue')
+  }.then {
+    t.query('INSERT INTO test (id, text) VALUES(?, ?)', 2, 'jajaja')
+  }.then {
+    t.query('SELECT * FROM test')
+  }.then {|r|
+    r.each {|row|
+      alert row.inspect
+    }
+  }
+}
+```
+
+Browser support
+===============
+
+* Edge (Current - 3) to Current
+* Firefox (Current - 3) to Current
+* Chrome (Current - 3) to Current
+* Safari (Current - 3) to Current
+* Opera (Current - 3) to Current
+
+Any problem above browsers should be considered and reported as a bug.
+
+(Current - 3) to Current denotes that we support the current major stable version
+of the browser and 3 versions preceding it. For example, if the current version
+of a browser is 24.x, we support all versions between 21.x to 24.x.
+
+We will accept compatibility patches for even earlier browser versions. Opal-Browser
+is written in such a way, that it integrates a robust compatibility check system,
+similar to Modernizr, and the history of this library goes even as far as supporting
+Internet Explorer 6.
+
+See the [polyfills documentation](docs/polyfills.md) if you wish to polyfill some
+behaviors not supported by the ancient web browsers (like `querySelectorAll`).
+
+License
+=======
+
+(The MIT License)
+
+Copyright (C) 2013-2018 by meh<br>
+Copyright (C) 2019-2021 hmdne and the Opal-Browser contributors
 
-The current approach is to have a file for each method in the `compatibility`
-directory where alternatives based on functional-presence are implemented.
+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:
 
-You can see an example for the matches selector API [here][1].
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
-[1]: https://github.com/opal/opal-browser/blob/master/opal/browser/compatibility/dom/element/matches.rb
+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.

data/Rakefile

@@ -1,5 +1,33 @@
 require 'bundler'
 Bundler.require
+require 'bundler/gem_tasks'
+
+require 'webdrivers'
+load 'webdrivers/Rakefile'
 
 require 'opal/rspec/rake_task'
-Opal::RSpec::RakeTask.new(:default)
+Opal::RSpec::RakeTask.new(:broken_rspec) do |_, task|
+  task.default_path = 'spec'
+  task.pattern = 'spec/**/*_spec.{rb,opal}'
+end
+
+task(:nil) {}
+
+%w[chrome edge gecko safari].each do |i|
+  dependency = nil
+  if %w[chrome edge gecko].include? i
+    dependency = "webdrivers:#{i}driver:update"
+  end
+  desc "Run Selenium tests with #{i}"
+  task :"selenium_#{i}" => dependency do
+    server = Process.spawn("bundle", "exec", "rackup")
+    at_exit { Process.kill(9, server) rescue nil }
+    sleep 2
+    ENV['BROWSER'] = i
+    load 'spec/runner.rb'
+  ensure
+    Process.kill(9, server) rescue nil
+  end
+end
+
+task :default => :selenium_chrome

data/config.ru

@@ -2,10 +2,17 @@ require 'bundler'
 Bundler.require
 
 apps = []
-apps << Opal::Server.new { |s|
+
+sprockets_env = Opal::RSpec::SprocketsEnvironment.new(spec_pattern         = 'spec/**/*_spec.{rb,opal}',
+                                                      spec_exclude_pattern = nil,
+                                                      spec_files           = nil,
+                                                      default_path         = 'spec')
+
+apps << Opal::Sprockets::Server.new(sprockets: sprockets_env) { |s|
   s.main = 'opal/rspec/sprockets_runner'
   s.append_path 'spec'
-  s.debug = false
+  s.index_path = 'index.html.erb'
+  s.debug = true
 }
 
 apps << Class.new(Sinatra::Base) {
@@ -33,6 +40,17 @@ apps << Class.new(Sinatra::Base) {
     "lol"
   end
 
+  post '/http-file' do
+    if params['lol'] == 'wut' && 
+       params['file'][:filename] == 'yay.txt' && 
+       params['file'][:tempfile].read == 'content'
+
+      "ok"
+    else
+      "fail"
+    end
+  end
+
   get '/events' do
     headers 'Content-Type' => 'text/event-stream'
 

data/docs/polyfills.md

@@ -0,0 +1,24 @@
+CSS selectors
+-------------
+Older browsers do not support CSS selector in queries, this means you'll need
+external polyfills for this.
+
+The suggested polyfill is [Sizzle](http://sizzlejs.com/), require it **before**
+opal-browser.
+
+JSON parsing
+------------
+Older browsers don't support JSON parsing natively, this means you'll need
+external polyfills for this.
+
+The suggested polyfill is [json2](https://github.com/douglascrockford/JSON-js),
+require it **before** opal-browser.
+
+XPath support
+-------------
+Not all browsers support XPath queries, I'm looking at you Internet Explorer,
+this means you'll need external polyfills for this.
+
+The suggested polyfill is
+[wgxpath](https://code.google.com/p/wicked-good-xpath/), require it **before**
+opal-browser.

data/examples/2048/Gemfile

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

data/examples/2048/README.md

@@ -0,0 +1,13 @@
+2048 clone with Opal-Browser
+============================
+
+A 167 line implementation of 2048, but in Ruby inside a browser!
+
+To install, run:
+
+    $ bundle install
+
+Start server
+------------
+
+    $ bundle exec rackup