opal-browser 0.2.0 → 0.3.0

data/opal/browser/canvas/style.rb

@@ -1,7 +1,7 @@
 module Browser; class Canvas
 
 class StyleObject
-  include Native
+  include Native::Wrapper
 
   attr_reader :context
 
@@ -56,10 +56,12 @@ class Style < StyleObject
 
     def smooth!
       `#@native.mozImageSmoothingEnabled = #{@smooth = true}`
+      `#@native.imageSmoothingEnabled = #{@smooth = true}`
     end
 
     def no_smooth!
       `#@native.mozImageSmoothingEnabled = #{@smooth = false}`
+      `#@native.imageSmoothingEnabled = #{@smooth = false}`
     end
   end
 

data/opal/browser/canvas/text.rb

@@ -1,7 +1,7 @@
 module Browser; class Canvas
 
 class Text
-  include Native
+  include Native::Wrapper
 
   attr_reader :context
 

data/opal/browser/canvas.rb

@@ -1,5 +1,3 @@
-require 'promise'
-
 require 'browser/canvas/style'
 require 'browser/canvas/text'
 require 'browser/canvas/data'
@@ -8,7 +6,7 @@ require 'browser/canvas/gradient'
 module Browser
 
 class Canvas
-  include Native
+  include Native::Wrapper
 
   attr_reader :element, :style, :text
 
@@ -59,6 +57,14 @@ class Canvas
     @element[:height].to_i
   end
 
+  def width=(new_width)
+    @element[:width] = new_width.to_i
+  end
+
+  def height=(new_height)
+    @element[:height] = new_height.to_i
+  end
+
   def append_to(parent)
     @element.append_to(parent)
   end
@@ -312,6 +318,14 @@ class Canvas
   def to_data(type = undefined)
     `#{@element.to_n}.toDataUrl(type)`
   end
+
+  def to_dom(*)
+    @element
+  end
+
+  def on(*args, &block); @element.on(*args, &block); end
+  def one(*args, &block); @element.one(*args, &block); end
+  def off(*args, &block); @element.off(*args, &block); end
 end
 
 Browser::DOM::Builder.for Canvas do |b, item|

data/opal/browser/console.rb

@@ -1,10 +1,12 @@
+warn "`console' has been moved to Opal's stdlib, please `require 'console'` instead." if RUBY_ENGINE_VERSION.to_f >= 0.9
+
 module Browser
 
 # Manipulate the browser console.
 #
 # @see https://developer.mozilla.org/en-US/docs/Web/API/console
 class Console
-  include Native
+  include Browser::NativeCachedWrapper
 
   # Clear the console.
   def clear

data/opal/browser/cookies.rb

@@ -5,10 +5,17 @@ module Browser
 # Allows manipulation of browser cookies.
 #
 # @see https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
+#
+# Usage:
+#
+#   cookies = Browser::Cookies.new(`document`)
+#   cookies["my-cookie"] = "monster"
+#   cookies.delete("my-cookie")
+#
 class Cookies
   # Default cookie options.
   DEFAULT = {
-    expires: Time.now + 1.day,
+    expires: Time.now + 60 * 60 * 24,
     secure:  false
   }
 
@@ -30,12 +37,12 @@ class Cookies
   #
   # @return [Object]
   def [](name)
-    matches = `#@document.cookie`.scan(/#{Regexp.escape(name.encode_uri_component)}=([^;]*)/)
+    matches = `#@document.cookie`.scan(/#{Regexp.escape(FormData.encode(name))}=([^;]*)/)
 
     return if matches.empty?
 
-    result = matches.map {|cookie|
-      JSON.parse(cookie.match(/^.*?=(.*)$/)[1].decode_uri_component)
+    result = matches.flatten.map {|value|
+      JSON.parse(FormData.decode(value))
     }
 
     result.length == 1 ? result.first : result
@@ -53,7 +60,9 @@ class Cookies
   # @option options [String]  :domain  the domain the cookie is valid on
   # @option options [Boolean] :secure  whether the cookie is secure or not
   def []=(name, value, options = {})
-    `#@document.cookie = #{encode name, value.is_a?(String) ? value : JSON.dump(value), @options.merge(options)}`
+    string = value.is_a?(String) ? value : JSON.dump(value)
+    encoded_value = encode(name, string, @options.merge(options))
+    `#@document.cookie = #{encoded_value}`
   end
 
   # Delete a cookie.
@@ -110,10 +119,10 @@ protected
   def encode(key, value, options = {})
     io = StringIO.new
 
-    io << key.encode_uri_component << ?= << value.encode_uri_component << '; '
+    io << FormData.encode(key) << ?= << FormData.encode(value) << '; '
 
     io << 'max-age=' << options[:max_age] << '; '        if options[:max_age]
-    io << 'expires=' << options[:expires].to_utc << '; ' if options[:expires]
+    io << 'expires=' << options[:expires].utc << '; '    if options[:expires]
     io << 'path='    << options[:path] << '; '           if options[:path]
     io << 'domain='  << options[:domain] << '; '         if options[:domain]
     io << 'secure'                                       if options[:secure]

data/opal/browser/crypto.rb

@@ -0,0 +1,79 @@
+module Browser
+
+# Implements (parts of) the web crypto interface
+#
+# https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API
+class Crypto
+  include NativeCachedWrapper
+
+  class Digest
+    def initialize(buf)
+      @buffer = Buffer.new(buf)
+    end
+
+    attr_reader :buffer
+
+    # Convert a digest to a hexadecimal string
+    def to_hex
+      buffer.to_a.map { |i| "%02x" % i }.join
+    end
+
+    # Convert a digest to a binary string
+    def to_s
+      buffer.to_a.map { |i| "%c" % i }.join
+    end
+
+    # Convert a digest to a Base64-encoded string
+    #
+    # You will need to `require "base64"`
+    def to_b64
+      Base64.strict_encode64(to_s)
+    end
+
+    # Convert a digest to a urlsafe Base64-encoded string
+    #
+    # You will need to `require "base64"`
+    def to_u64(padding: false)
+      Base64.urlsafe_encode64(to_s, padding: padding)
+    end
+  end
+
+  # Compute a cryptographic digest of data (a Buffer). If block is given,
+  # it will call a block, otherwise it will return a Promise that will
+  # return once a digest is computed.
+  #
+  # Allowed values for algo: SHA-1, SHA-256 (default), SHA-368, SHA-512.
+  #
+  # The block/promise will be given an argument of type {Digest} which can
+  # be used to format a digest.
+  #
+  # Example:
+  # ```
+  # Browser::Blob.new(['test']).buffer.then { |b|
+  #   $window.crypto.digest(b)
+  # }.then { |d|
+  #   puts d.to_hex
+  # }
+  # ```
+  def digest data, algo = 'SHA-256', &block
+    promise = nil
+    unless block_given?
+      promise = Promise.new
+      block = proc { |i| promise.resolve(i) }
+    end
+    resblock = proc { |i| block.call(Digest.new(i)) }
+
+    `#@native.subtle.digest(algo, #{Native.convert(data)}).then(#{resblock.to_n})`
+    promise
+  end
+end
+
+class Window
+  # @!attribute [r] crypto
+  # @return [Crypto] the crypto interface of this window
+  def crypto
+    @crypto ||= Crypto.new(`#@native.crypto`)
+  end
+end
+
+end

data/opal/browser/css/declaration.rb

@@ -1,7 +1,7 @@
 module Browser; module CSS
 
 class Declaration
-  include Native
+  include Browser::NativeCachedWrapper
   include Enumerable
 
   def rule

data/opal/browser/css/rule.rb

@@ -1,7 +1,7 @@
 module Browser; module CSS
 
 class Rule
-  include Native
+  include Browser::NativeCachedWrapper
 
   STYLE_RULE               = 1
   CHARSET_RULE             = 2

data/opal/browser/css/style_sheet.rb

@@ -1,10 +1,10 @@
 module Browser; module CSS
 
 class StyleSheet
-  include Native
+  include Browser::NativeCachedWrapper
 
   def initialize(what)
-    if what.is_a? DOM::Element
+    if DOM::Element === what
       super(`#{what.to_n}.sheet`)
     else
       super(what)

data/opal/browser/css.rb

@@ -4,19 +4,35 @@ require 'browser/css/rule'
 require 'browser/css/rule/style'
 
 module Kernel
-  # Create a <style> element from a string or a block using the
-  # {Browser::CSS::Builder} DSL.
+  # @overload CSS(document = $document, &block)
   #
-  # @param text [String] the CSS text
-  # @return [Browser::DOM::Element] the create <style> element
-  def CSS(text = nil, &block)
-    style = $document.create_element(:style)
+  #   Create a `<style>` element from a {Paggio::CSS} DSL.
+  #
+  #   @param document [Browser::DOM::Document] the document instance
+  #     we intend to use
+  #
+  #   @return [Browser::DOM::Element] the created `<style>` element
+  #
+  # @overload CSS(string, document = $document)
+  #
+  #   Create a `<style>` element from a string.
+  #
+  #   @param document [Browser::DOM::Document] the document instance
+  #     we intend to use
+  #
+  #   @return [Browser::DOM::Element] the created `<style>` element
+  def CSS(*args, &block)
+    document = if args.length > 1 || block_given?
+      args.pop
+    end || $document
+
+    style = document.create_element(:style)
     style[:type] = 'text/css'
 
     if block
       style.inner_text = Paggio.css(&block)
     else
-      style.inner_text = text
+      style.inner_text = args.join("")
     end
 
     style

data/opal/browser/database/sql.rb

@@ -1,4 +1,3 @@
-require 'promise'
 require 'ostruct'
 
 module Browser; module Database
@@ -27,7 +26,7 @@ class SQL
     Timeout    = Class.new(self)
   end
 
-  include Native
+  include Native::Wrapper
 
   # @return [String] the name of the database
   attr_reader :name
@@ -73,7 +72,7 @@ class SQL
     return `#@native.version` unless block
 
     `#@native.changeVersion(#{from}, #{to},
-      #{-> t { block.call(Transaction.new(self, t)) }})`
+      #{->(t) { block.call(Transaction.new(self, t)) }})`
   end
 
   # Start a transaction on the database.
@@ -82,12 +81,12 @@ class SQL
   def transaction(&block)
     raise ArgumentError, 'no block given' unless block
 
-    `#@native.transaction(#{-> t { block.call(Transaction.new(self, t)) }})`
+    `#@native.transaction(#{->(t) { block.call(Transaction.new(self, t)) }})`
   end
 
   # Allows you to make changes to the database or read data from it.
   class Transaction
-    include Native
+    include Native::Wrapper
 
     # @return [Database] the database the transaction has been created from
     attr_reader :database
@@ -109,8 +108,8 @@ class SQL
       promise = Promise.new
 
       `#@native.executeSql(#{query}, #{parameters},
-        #{-> _, r { promise.resolve(Result.new(self, r)) }},
-        #{-> _, e { promise.reject(Error.new(e)) }})`
+        #{->(_, r) { promise.resolve(Result.new(self, r)) }},
+        #{->(_, e) { promise.reject(Error.new(e)) }})`
 
       promise
     end
@@ -129,7 +128,7 @@ class SQL
   end
 
   class Result
-    include Native
+    include Native::Wrapper
 
     # @return [Transaction] the transaction the result came from
     attr_reader :transaction

data/opal/browser/delay.rb

@@ -49,6 +49,17 @@ class Window
   def after!(time, &block)
     Delay.new(@native, time, &block)
   end
+
+  # Returns a promise that will resolve after the given seconds.
+  #
+  # @param time [Float] the seconds after it gets called
+  #
+  # @return [Promise] the promise that will resolve after timeout happens
+  def resolve_after(time)
+    promise = Promise.new
+    Delay.new(@native, time) { promise.resolve }.start
+    promise
+  end
 end
 
 end
@@ -63,6 +74,11 @@ module Kernel
   def after!(time, &block)
     $window.after!(time, &block)
   end
+
+  # (see Browser::Window#resolve_after)
+  def resolve_after(time)
+    $window.resolve_after(time)
+  end
 end
 
 class Proc

data/opal/browser/dom/attribute.rb

@@ -2,7 +2,7 @@ module Browser; module DOM
 
 # Encapsulates an {Element} attribute.
 class Attribute
-  include Native
+  include Browser::NativeCachedWrapper
 
   # @!attribute [r] name
   # @return [String] the name of the attribute

data/opal/browser/dom/builder.rb

@@ -38,10 +38,32 @@ class Builder
 
   attr_reader :document, :element
 
-  def initialize(document, &block)
+  NEW_PAGGIO = (Paggio::HTML.instance_method(:build!) rescue false)
+
+  def initialize(document, builder=nil, &block)
     @document = document
-    @builder  = Paggio::HTML.new(&block)
-    @roots    = @builder.each.map { |e| Builder.build(self, e) }
+
+    # Compatibility issue due to an unreleased Paggio gem.
+    # Let's try to support both versions. When Paggio is released,
+    # we may remove it.
+
+    if NEW_PAGGIO
+      @builder = Paggio::HTML.new(defer: true, &block)
+
+      build = proc do
+        @builder.build!(force_call: !!builder)
+        @roots = @builder.each.map { |e| Builder.build(self, e) }
+      end
+
+      if builder
+        builder.extend!(@builder, &build)
+      else
+        build.()
+      end
+    else
+      @builder = Paggio::HTML.new(&block)
+      @roots = @builder.each.map { |e| Builder.build(self, e) }
+    end
   end
 
   def to_a
@@ -54,15 +76,12 @@ Builder.for String do |b, item|
 end
 
 Builder.for Paggio::HTML::Element do |b, item|
-  dom = b.document.create_element(`item.name`)
+  options = {}
 
-  if Hash === `item.attributes`
-    dom.attributes.merge!(`item.attributes`)
-  end
+  options[:attrs] = `item.attributes` if Hash === `item.attributes`
+  options[:classes] = `item.class_names`
 
-  `item.class_names`.each {|value|
-    dom.add_class value
-  }
+  dom = b.document.create_element(`item.name`, **options)
 
   if on = `item.on || nil`
     on.each {|args, block|

data/opal/browser/dom/document.rb

@@ -1,6 +1,8 @@
 module Browser; module DOM
 
 class Document < Element
+  include DocumentOrShadowRoot
+
   # Get the first element matching the given ID, CSS selector or XPath.
   #
   # @param what [String] ID, CSS selector or XPath
@@ -24,20 +26,67 @@ class Document < Element
   # @return [Element?] the body element of the document
   def body
     DOM(`#@native.body`)
+  rescue ArgumentError
+    raise '$document.body is not defined; try to wrap your code in $document.ready{}'
   end
 
   # Create a new element for the document.
   #
   # @param name [String] the node name
-  # @param options [Hash] optional `:namespace` name
+  # @param builder [Browser::DOM::Builder] optional builder to append element to
+  # @param options [String] :namespace optional namespace name
+  # @param options [String] :is optional WebComponents is parameter
+  # @param options [String] :id optional id to set
+  # @param options [Array<String>] :classes optional classes to set
+  # @param options [Hash] :attrs optional attributes to set
   #
   # @return [Element]
-  def create_element(name, options = {})
+  def create_element(name, builder=nil, **options, &block)
+    opts = {}
+
+    if options[:is] ||= (options.dig(:attrs, :is))
+      opts[:is] = options[:is]
+    end
+
     if ns = options[:namespace]
-      DOM(`#@native.createElementNS(#{ns}, #{name})`)
+      elem = `#@native.createElementNS(#{ns}, #{name}, #{opts.to_n})`
     else
-      DOM(`#@native.createElement(name)`)
+      elem = `#@native.createElement(name, #{opts.to_n})`
     end
+
+    if options[:classes]
+      `#{elem}.className = #{Array(options[:classes]).join(" ")}`
+    end
+
+    if options[:id]
+      `#{elem}.id = #{options[:id]}`
+    end
+
+    if options[:attrs]
+      options[:attrs].each do |k,v|
+        next unless v
+        `#{elem}.setAttribute(#{k}, #{v})`
+      end
+    end
+
+    dom = DOM(elem)
+
+    if block_given?
+      dom.inner_dom(builder, &block)
+    end
+
+    if builder
+      builder << dom
+    end
+
+    dom
+  end
+
+  # Create a new document fragment.
+  #
+  # @return [DocumentFragment]
+  def create_document_fragment
+    DOM(`#@native.createDocumentFragment()`)
   end
 
   # Create a new text node for the document.
@@ -49,6 +98,15 @@ class Document < Element
     DOM(`#@native.createTextNode(#{content})`)
   end
 
+  # Create a new comment node for the document.
+  #
+  # @param content [String] the comment content
+  #
+  # @return [Comment]
+  def create_comment(content)
+    DOM(`#@native.createComment(#{content})`)
+  end
+
   def document
     self
   end
@@ -98,7 +156,13 @@ class Document < Element
 
   # Check if the document is ready.
   def ready?
-    `#@native.readyState === "complete"`
+    `#@native.readyState === "complete" || #@native.readyState === "interactive"`
+  end
+
+  # @!attribute referrer
+  # @return [String] the referring document, or empty string if direct access
+  def referrer
+    `#@native.referrer`
   end
 
   # @!attribute root
@@ -111,14 +175,6 @@ class Document < Element
     `#@native.documentElement = #{Native.convert(element)}`
   end
 
-  # @!attribute [r] style_sheets
-  # @return [Array<CSS::StyleSheet>] the style sheets for the document
-  def style_sheets
-    Native::Array.new(`#@native.styleSheets`) {|e|
-      CSS::StyleSheet.new(e)
-    }
-  end
-
   # @!attribute title
   # @return [String] the document title
   def title
@@ -129,6 +185,18 @@ class Document < Element
     `#@native.title = value`
   end
 
+  # @!attribute [r] hidden?
+  # @return [Boolean] is the page considered hidden?
+  def hidden?
+    `#@native.hidden`
+  end
+
+  # @!attribute [r] visibility
+  # @return [String] the visibility state of the document - prerender, hidden or visible
+  def visibility
+    `#@native.visibilityState`
+  end
+
   if Browser.supports? 'Document.view'
     def window
       Window.new(`#@native.defaultView`)

data/opal/browser/dom/document_fragment.rb

@@ -1,7 +1,25 @@
 module Browser; module DOM
 
+# TODO: DocumentFragment is not a subclass of Element, but
+#       a subclass of Node. It implements a ParentNode.
+#
+# @see https://github.com/opal/opal-browser/pull/46
 class DocumentFragment < Element
+  def self.new(node)
+    if self == DocumentFragment
+      if defined? `#{node}.mode`
+        ShadowRoot.new(node)
+      else
+        super
+      end
+    else
+      super
+    end
+  end
 
+  def self.create
+    $document.create_document_fragment
+  end
 end
 
 end; end

data/opal/browser/dom/document_or_shadow_root.rb

@@ -0,0 +1,19 @@
+module Browser; module DOM
+
+# Document and ShadowRoot have some methods and properties in common.
+# This solution mimics how it's done in DOM.
+#
+# @see https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot
+module DocumentOrShadowRoot
+  # @!attribute [r] style_sheets
+  # @return [Array<CSS::StyleSheet>] the style sheets for the document
+  def style_sheets
+    Native::Array.new(`#@native.styleSheets`) {|e|
+      CSS::StyleSheet.new(e)
+    }
+  end
+
+  alias stylesheets style_sheets
+end
+
+end; end