opal-browser 0.2.0.beta1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 7b0aa6c5110fd5e167607dbdea62c227163d95be
-  data.tar.gz: 666fc17d0cb5be69e9acf8a2f2d526e4995b7496
+SHA256:
+  metadata.gz: 16a070e0b1c644fc54d33c3266f0c470a920cac127bc4b37ede951f55f76517f
+  data.tar.gz: 7895a72bebd9b3528fcd1b714a603355f83b9fb3c34ea610f3bc4157a5eb8b93
 SHA512:
-  metadata.gz: bdb5103e7c85d23815225544ee28a504a024cc61beb58c5ca77e1af6c0b33853c6bc0b5cc530975039f28151572b423725e6abc7bf5aa22bd4fe82ec4ef68ed8
-  data.tar.gz: 4c08aa42993c6e63623dae9d5b9b09ed722801bf771c1527c56bb0791807958ffbb2d5c80904ae457c0686cf15ea597176de7269f9862a0d014f7171d7597f35
+  metadata.gz: 3e08c691cfc2f4c633c3467a7ed8059690ded3bbcf3759e2c5b5333f220f67752caf4d13316dd956e87304f192732ca027434810b1c6a0f77cc7e039fa5fa871
+  data.tar.gz: d724afddb0f157fe632275195ca01bc776129442cce3876fb0d6aea2d30202e81d0240c4666b5fe76837f5671398efa63f648f61e518fc7b7a7017fccb1817e7

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/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 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.3.0.beta3'
+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,16 +1,84 @@
-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.png?branch=master)](http://travis-ci.org/opal/opal-browser)
-[![Gem Version](https://badge.fury.io/rb/opal-browser.png)](http://badge.fury.io/rb/opal-browser)
-[![Code Climate](https://codeclimate.com/github/opal/opal-browser.png)](https://codeclimate.com/github/opal/opal-browser)
+[![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)
+[![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
+=====
+
+_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
 ---
@@ -18,16 +86,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 'dom: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 'dom:load' do
+$document.ready do
   DOM {
     div.info {
       span.red "I'm all cooked up."
@@ -36,12 +104,38 @@ $document.on 'dom: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)
+  # 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 {
@@ -59,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
@@ -72,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
@@ -89,67 +187,100 @@ 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.
 
+```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.
 
-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
-
-Any problem above browsers should be considered and reported as a bug.
+```ruby
+require 'browser/storage'
 
-(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.
+$storage = $window.storage
+$storage[:hello] = "world"
+```
 
-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.
+Database SQL
+------------
+WebSQL has been fully wrapped (Chromium-only)
 
-Cross-browser testing sponsored by [BrowserStack](http://browserstack.com).
+```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
+    }
+  }
+}
+```
 
-CSS selectors
--------------
-Older browsers do not support CSS selector in queries, this means you'll need
-external polyfills for this.
+Browser support
+===============
 
-The suggested polyfill is [Sizzle](http://sizzlejs.com/), require it **before**
-opal-browser.
+* 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
 
-JSON parsing
-------------
-Older browsers don't support JSON parsing natively, this means you'll need
-external polyfills for this.
+Any problem above browsers should be considered and reported as a bug.
 
-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