opal-browser 0.2.0 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 7da4f18bcba46ae940082055c721673e46573149
-  data.tar.gz: f70ab45c0391a6e9924b0b29a3a01923a7f1bcd2
+SHA256:
+  metadata.gz: ca31ac16a859cb8e8e2d033f9654d73f69af51fb370b84c4eea90c11d854b591
+  data.tar.gz: cf292f8f778e76a8a0552a57d608cafbd975653df39df2f79e6d0ea1f8600d5e
 SHA512:
-  metadata.gz: e193b212a1d022644320910c25550cfb9f1db89667f07ea1c594ef5c70aff102a3184b68099f7cd7e9e0d8f6d4904e1dc429c678fbe6fb913d20df64c2c5f610
-  data.tar.gz: 03ed1d8246750cae5bae479b3146de89217ab57af51e5e95d1889247e74a7e6a4fdfad38447f1d0e8290b356924dfa4fd46c899469fa3b95c2bc568ad9c8d644
+  metadata.gz: 60b6ebdb57718727af8443be34513c614d49d6a182a7a1189bf37ecf2998e8895a8ed6b321455be04e45ce94815e762d93cd1ad3d35b9bf8c1257b5a9face39e
+  data.tar.gz: 0eda48ea9ba83c04929266bb2c664290d22389a6ff16aef4faab3b4a055c7510ed2e9734d6f6d7b409a79ecb56086627df559ea2c0d8ce3281a9e13472731adc

data/.github/workflows/build.yml

@@ -0,0 +1,78 @@
+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
+            opal: master
+          - name: Chromium/Linux/Opal-1.4
+            opal: 1.4
+          - name: Chromium/Linux/Opal-1.3/PromiseV2
+            opal: 1.3
+            promise: v2
+          - name: Chromium/Linux/Opal-1.3
+            opal: 1.3
+          - name: Chromium/Linux/Opal-1.0
+            opal: '1.0'
+          - name: Chromium/Linux/Ruby-2.7
+            ruby: 2.7
+          - name: Chromium/Linux/Ruby-2.6
+            ruby: 2.6
+          - name: Firefox/Linux
+            browser: gecko
+          - name: Chromium/Windows
+            os: windows-latest
+          - name: Firefox/Windows
+            browser: gecko
+            os: windows-latest
+          - name: Edge/Windows
+            browser: edge
+            os: windows-latest
+          - name: Chromium/macOS
+            os: macos-latest
+          - name: Firefox/macOS
+            browser: gecko
+            os: macos-latest
+          - name: Safari/macOS
+            browser: safari
+            os: macos-latest
+
+    runs-on: ${{ matrix.combo.os || 'ubuntu-latest' }}
+
+    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.3' }}-${{ github.ref }}-${{ hashFiles('**/Gemfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.3' }}-${{ github.ref }}
+            ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.3' }}-master
+            ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.3' }}-
+            ${{ 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 || 'chrome' }}

data/.gitignore

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

data/CHANGELOG.md

@@ -0,0 +1,11 @@
+## 0.3.3
+* Compatibility fix for Opal 1.4
+
+## 0.3.2
+* Cookie: refactor the module
+  * Note in documentation it's available as `$document.cookies` and it's the preferred way to access it
+  * Always encode a cookie with JSON, unless a new parameter `raw:` is provided
+
+## 0.3.1
+* Element#inner_dom: Reduce flickering - first build tree, then insert it
+* NodeSet#to_a to be aliased to #to_ary

data/Gemfile

@@ -2,15 +2,29 @@ source 'https://rubygems.org'
 gemspec
 
 # specs
+gem 'rake'
 gem 'rack'
 gem 'sinatra'
 gem 'sinatra-websocket'
-gem 'opal-rspec', '0.4.0.beta1'
+gem 'opal-rspec'
+gem 'opal-sprockets'
+# Force build of eventmachine... I wish we could find a way to not use
+# this unmaintained library anymore.
+gem 'eventmachine', github: 'eventmachine/eventmachine'
+gem 'thin', github: 'macournoyer/thin' unless RUBY_PLATFORM =~ /mingw/
 
 # runner
 gem 'selenium-webdriver', require: false
 gem 'rest-client', require: false
+gem 'webdrivers', require: false
+gem 'rexml', require: false
 
 # browser
-gem 'opal', github: 'opal/opal'
-gem 'paggio', github: 'meh/paggio'
+case ENV['OPAL_VERSION']
+when nil
+when /\./
+  gem 'opal', "~> #{ENV['OPAL_VERSION']}.0a"
+else
+  gem 'opal', github: 'opal/opal', ref: ENV['OPAL_VERSION']
+end
+

data/LICENSE

@@ -1,4 +1,5 @@
-Copyright (C) 2014 by meh
+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

data/README.md

@@ -1,18 +1,33 @@
-Browser support for Opal
-========================
+Opal-Browser - Client side web development in pure Ruby, using Opal
+===================================================================
 
-[![Build Status](https://secure.travis-ci.org/opal/opal-browser.svg?branch=master)](http://travis-ci.org/opal/opal-browser)
 [![Gem Version](https://badge.fury.io/rb/opal-browser.svg)](http://badge.fury.io/rb/opal-browser)
-[![Code Climate](http://img.shields.io/codeclimate/github/opal/opal-browser.svg)](https://codeclimate.com/github/opal/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)
+[![Join Chat](https://img.shields.io/badge/slack-join%20chat-46BC99?logo=slack&style=flat)](https://slack.opalrb.com/)
+[![Stack Overflow](https://img.shields.io/badge/stackoverflow-%23opalrb-orange.svg?style=flat)](https://stackoverflow.com/questions/ask?tags=opalrb,opal-browser)
+[![Documentation](https://img.shields.io/badge/docs-updated-blue.svg)](https://rubydoc.info/gems/opal-browser)
 
-
-This library aims to be a full-blown wrapper for all the browser API including
+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
 =====
 
-_Server side (config.ru, Rakefile, Rails, Sinatra, etc.)_
+_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'
@@ -23,15 +38,47 @@ _Browser side_
 
 ```ruby
 require 'opal'
-require 'browser'
+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
 ---
@@ -44,8 +91,8 @@ $document.ready do
 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.ready do
@@ -57,12 +104,38 @@ $document.ready 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)
+  # You can also use `e.stop` to stop propagating the event to other handlers.
+  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 {
@@ -80,6 +153,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
@@ -93,6 +168,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
@@ -111,6 +188,8 @@ 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
@@ -126,16 +205,36 @@ History
 -------
 The HTML5 History API has been fully wrapped.
 
+```ruby
+current = $window.history.current
+$window.history.replace("?get=params")
+$window.history.push("?get=params")
+$window.history.back
+
+$window.on :popstate do |e|
+  p "User clicked a back button! He is now on #{$window.history.current}"
+end
+```
+
 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.
 
+```ruby
+require 'browser/storage'
+
+$storage = $window.storage
+$storage[:hello] = "world"
+```
+
 Database SQL
 ------------
-WebSQL has been fully wrapped.
+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 {
@@ -155,55 +254,33 @@ db.transaction {|t|
 Browser support
 ===============
 
-* Internet Explorer 6+
-* Firefox (Current - 1) or Current
-* Chrome (Current - 1) or Current
-* Safari 5.1+
-* Opera 12.1x or (Current - 1) or Current
+* 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 - 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 last 2 versions of Opera. For example, if the current Opera version is 20.x,
-we support Opera 12.1x, 19.x and 20.x but not Opera 15.x through 18.x.
-
-Cross-browser testing sponsored by [BrowserStack](http://browserstack.com).
-
-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.
+(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.
 
-XPath support
--------------
-Not all browsers support XPath queries, I'm looking at you Internet Explorer,
-this means you'll need external polyfills for this.
+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.
 
-The suggested polyfill is
-[wgxpath](https://code.google.com/p/wicked-good-xpath/), require it **before**
-opal-browser.
+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) 2014 by meh
+Copyright (C) 2013-2018 by meh<br>
+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

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,11 +2,17 @@ require 'bundler'
 Bundler.require
 
 apps = []
-apps << Opal::Server.new { |s|
-  s.append_path 'spec'
+
+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.index_path = 'index.html.erb'
-  s.debug = false
+  s.debug = true
 }
 
 apps << Class.new(Sinatra::Base) {
@@ -34,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