opal-browser 0.2.0 → 0.3.0

data/opal/browser/window.rb

@@ -1,6 +1,5 @@
 require 'browser/window/view'
 require 'browser/window/size'
-require 'browser/window/scroll'
 
 module Browser
 
@@ -30,7 +29,7 @@ class Window
     }
   end
 
-  include Native
+  include Browser::NativeCachedWrapper
   include Event::Target
 
   target {|value|
@@ -45,8 +44,8 @@ class Window
   end
 
   # Display a prompt dialog with the passed string as text.
-  def prompt(value)
-    `#@native.prompt(value) || nil`
+  def prompt(value, default=nil)
+    `#@native.prompt(value, #{default || ""}) || nil`
   end
 
   # Display a confirmation dialog with the passed string as text.
@@ -54,25 +53,43 @@ class Window
     `#@native.confirm(value) || false`
   end
 
+  # @!attribute [r] parent
+  # @return [Window] parent of the current window or subframe
+  def parent
+    @parent ||= Browser::Window.new(`#@native.parent`)
+  end
+
+  # @!attribute [r] top
+  # @return [Window] reference to the topmost window in the window hierarchy
+  def top
+    @top ||= Browser::Window.new(`#@native.top`)
+  end
+
+  # @!attribute [r] opener
+  # @return [Window] reference to the window that opened the window using `open`
+  def opener
+    @opener ||= Browser::Window.new(`#@native.opener`)
+  end
+
   # Get the {View} for the window.
   #
   # @return [View]
   def view
-    View.new(self)
+    @view ||= View.new(self)
   end
 
   # Get the {Size} for this window.
   #
   # @return [Size]
   def size
-    Size.new(self)
+    @size ||= Size.new(self)
   end
 
-  # Get the {Scroll} for this window.
+  # Get the {DOM::Element::Scroll} for this window.
   #
-  # @return [Scroll]
+  # @return [DOM::Element::Scroll]
   def scroll
-    Scroll.new(self)
+    @scroll ||= DOM::Element::Scroll.new(self)
   end
 
   if Browser.supports? 'Window.send'
@@ -90,11 +107,7 @@ class Window
   end
 
   def close
-    %x{
-      return (window.open('', '_self', '') && window.close()) ||
-             (window.opener = null && window.close()) ||
-             (window.opener = '' && window.close());
-    }
+    `#{@native}.close()`
   end
 end
 
@@ -109,8 +122,8 @@ module Kernel
   end
 
   # (see Browser::Window#prompt)
-  def prompt(value)
-    $window.prompt(value)
+  def prompt(value, default=nil)
+    $window.prompt(value, default)
   end
 
   # (see Browser::Window#confirm)

data/opal/browser.rb

@@ -1,11 +1 @@
-require 'native'
-require 'paggio'
-
-require 'browser/version'
-require 'browser/utils'
-require 'browser/support'
-
-require 'browser/event'
-require 'browser/window'
-require 'browser/dom'
-require 'browser/css'
+require 'browser/setup/traditional'

data/opal-browser.gemspec

@@ -4,7 +4,7 @@ require 'browser/version'
 Gem::Specification.new {|s|
   s.name     = 'opal-browser'
   s.version  = Browser::VERSION
-  s.author   = 'meh.'
+  s.author   = ['meh.', 'hmdne']
   s.email    = 'meh@schizofreni.co'
   s.homepage = 'http://github.com/opal/opal-browser'
   s.platform = Gem::Platform::RUBY
@@ -16,6 +16,6 @@ Gem::Specification.new {|s|
   s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   s.require_paths = ['lib']
 
-  s.add_dependency 'opal'
-  s.add_dependency 'paggio'
+  s.add_dependency 'opal', ['>= 1.0', '< 2.0']
+  s.add_dependency 'paggio', '>= 0.3.0'
 }

data/spec/database/sql_spec.rb

@@ -24,107 +24,115 @@ describe Browser::Database::SQL do
   end
 
   describe '#transaction' do
-    async 'calls the block with the transaction' do
+    it 'calls the block with the transaction' do
       sql = SQL.new('test', size: SIZE)
 
+      promise = Browser::Promise.new
       sql.transaction {|t|
-        async {
-          expect(t).to be_a(SQL::Transaction)
-        }
+        expect(t).to be_a(SQL::Transaction)
+        promise.resolve
       }
+      promise.for_rspec
     end
 
-    async 'the transaction database is the right one' do
+    it 'the transaction database is the right one' do
       sql = SQL.new('test', size: SIZE)
 
+      promise = Browser::Promise.new
       sql.transaction {|t|
-        async {
-          expect(t.database).to eq(sql)
-        }
+        expect(t.database).to eq(sql)
+        promise.resolve
       }
+      promise.for_rspec
     end
   end
 
   describe SQL::Transaction do
     describe '#query' do
-      async 'returns a promise' do
+      it 'returns a promise' do
         sql = SQL.new('test', size: SIZE)
 
+        promise = Browser::Promise.new
         sql.transaction {|t|
-          async {
-            expect(t.query('hue')).to be_a(Promise)
-          }
+          expect(t.query('hue')).to be_a(Promise)
+          promise.resolve
         }
+        promise.for_rspec
       end
 
-      async 'resolves on success' do
+      it 'resolves on success' do
         sql = SQL.new('test', size: SIZE)
 
+        promise = Browser::Promise.new
         sql.transaction {|t|
           t.query('CREATE TABLE IF NOT EXISTS test(ID INTEGER PRIMARY KEY ASC, a TEXT)').then {|r|
-            async {
-              expect(r).to be_a(SQL::Result)
-            }
+            expect(r).to be_a(SQL::Result)
+            promise.resolve
           }
         }
+        promise.for_rspec
       end
 
-      async 'rejects on failure' do
+      it 'rejects on failure' do
         sql = SQL.new('test', size: SIZE)
 
+        promise = Browser::Promise.new
         sql.transaction {|t|
           t.query('huehue').rescue {|e|
-            async {
-              expect(e).to be_a(SQL::Error::Syntax)
-            }
+            expect(e).to be_a(SQL::Error::Syntax)
+            promise.resolve
           }
         }
+        promise.for_rspec
       end
     end
   end
 
   describe SQL::Result do
     describe '#length' do
-      async 'has the proper length' do
+      it 'has the proper length' do
         sql = SQL.new('test', size: SIZE)
 
+        promise = Browser::Promise.new
         sql.transaction {|t|
           t.query('SELECT 1').then {|r|
-            async {
-              expect(r.length).to eq(1)
-            }
+            expect(r.length).to eq(1)
+            promise.resolve
           }
         }
+        promise.for_rspec
       end
     end
 
     describe '#[]' do
-      async 'returns a row' do
+      it 'returns a row' do
         sql = SQL.new('test', size: SIZE)
 
+        promise = Browser::Promise.new
         sql.transaction {|t|
           t.query('SELECT 1, 2, 3').then {|r|
-            async {
-              expect(r[0]).to be_a(SQL::Row)
-              expect(r[-1]).to be_a(SQL::Row)
+            expect(r[0]).to be_a(SQL::Row)
+            expect(r[-1]).to be_a(SQL::Row)
 
-              expect(r[0]).to eq(r[-1])
-            }
+            expect(r[0]).to eq(r[-1])
+            promise.resolve
           }
         }
+        promise.for_rspec
       end
 
-      async 'returns nil on missing row' do
+      it 'returns nil on missing row' do
         sql = SQL.new('test', size: SIZE)
 
+        promise = Browser::Promise.new
         sql.transaction {|t|
           t.query('SELECT 1, 2, 3').then {|r|
-            async {
-              expect(r[5]).to be_nil
-              expect(r[-5]).to be_nil
-            }
+            expect(r[5]).to be_nil
+            expect(r[-5]).to be_nil
+            promise.resolve
           }
         }
+        promise.for_rspec
       end
     end
   end

data/spec/delay_spec.rb

@@ -3,36 +3,39 @@ require 'browser/delay'
 
 describe Browser::Window do
   describe '#after' do
-    async 'calls the block after the given time' do
+    it 'calls the block after the given time' do
+      promise = Browser::Promise.new
       $window.after 0.3 do
-        async {
-          expect(true).to be_truthy
-        }
+        expect(true).to be_truthy
+        promise.resolve
       end
+      promise.for_rspec
     end
   end
 end
 
 describe Kernel do
   describe '#after' do
-    async 'calls the block after the given time' do
+    it 'calls the block after the given time' do
+      promise = Browser::Promise.new
       after 0.3 do
-        async {
-          expect(true).to be_truthy
-        }
+        expect(true).to be_truthy
+        promise.resolve
       end
+      promise.for_rspec
     end
   end
 end
 
 describe Proc do
   describe '#after' do
-    async 'calls the block after the given time' do
+    it 'calls the block after the given time' do
+      promise = Browser::Promise.new
       -> {
-        async {
-          expect(true).to be_truthy
-        }
+        expect(true).to be_truthy
+        promise.resolve
       }.after 0.3
+      promise.for_rspec
     end
   end
 end

data/spec/dom/document_spec.rb

@@ -39,22 +39,24 @@ describe Browser::DOM::Document do
   end
 
   describe "#ready" do
-    async "calls the block when the document is ready" do
+    it "calls the block when the document is ready" do
+      promise = Browser::Promise.new
       $document.ready do
-        async {
-          expect(true).to be_truthy
-        }
+        expect(true).to be_truthy
+        promise.resolve
       end
+      promise.for_rspec
     end
   end
 
   describe "#ready?" do
-    async "is true inside a #ready block" do
+    it "is true inside a #ready block" do
+      promise = Browser::Promise.new
       $document.ready do
-        async {
-          expect($document.ready?).to be_truthy
-        }
+        expect($document.ready?).to be_truthy
+        promise.resolve
       end
+      promise.for_rspec
     end
   end
 end

data/spec/dom/element/custom_spec.rb

@@ -0,0 +1,106 @@
+require 'spec_helper'
+require 'browser/dom/element/custom'
+
+describe Browser::DOM::Element::Custom do
+  before(:each) do
+    $scratchpad = Hash.new { false }
+  end
+
+  def create_custom_class(name, observed_attrs = [])
+    Class.new(Browser::DOM::Element::Custom) do
+      def initialize(node)
+        super
+        $scratchpad[:initialized] = true
+      end
+
+      def attached
+        $scratchpad[:attached] = true
+      end
+
+      def detached
+        $scratchpad[:detached] = true
+      end
+
+      def adopted
+        $scratchpad[:adopted] = true
+      end
+
+      def attribute_changed(attr, from, to)
+        $scratchpad[:attribute_changed] = [attr, from, to]
+      end
+
+      self.observed_attributes = observed_attrs
+
+      def_custom name
+    end
+  end
+
+  describe "upgrades" do
+    html <<-HTML
+      <app-ex1></app-ex1>
+      <app-ex2></app-ex2>
+      <app-ex7 prop="true"></app-ex7>
+    HTML
+
+    it "existing elements when they have been initialized before" do
+      expect($document.at_css("app-ex1").class).to eq(Browser::DOM::Element)
+      klass = create_custom_class("app-ex1")
+      expect($document.at_css("app-ex1").class).to eq(klass)
+      expect($scratchpad[:initialized]).to be(true)
+      expect($scratchpad[:attached]).to be(true)
+    end
+
+    it "existing elements when they have not been initialized before" do
+      klass = create_custom_class("app-ex2")
+      expect($scratchpad[:initialized]).to be(true)
+      expect($scratchpad[:attached]).to be(true)
+      expect($document.at_css("app-ex2").class).to eq(klass)
+    end
+
+    it "and fires property update events when upgraded" do
+      klass = create_custom_class("app-ex7", ["prop"])
+      expect($scratchpad[:attribute_changed]).to eq([:prop, nil, "true"])
+    end
+  end
+
+  it "creates and handles new elements correctly" do
+    klass = create_custom_class("app-ex3")
+    elem = klass.new
+    expect($scratchpad[:initialized]).to be(true)
+    expect($scratchpad[:attached]).to be(false)
+    $document.body << elem
+    expect($scratchpad[:detached]).to be(false)
+    expect($scratchpad[:attached]).to be(true)
+    elem.remove
+    expect($scratchpad[:detached]).to be(true)
+  end
+
+  it "correctly tracks updated properties" do
+    klass = create_custom_class("app-ex4")
+    elem = klass.new
+    expect($scratchpad[:attribute_changed]).to be(false)
+    elem[:untracked] = "test"
+    expect($scratchpad[:attribute_changed]).to be(false)
+
+    klass = create_custom_class("app-ex5", ["tracked"])
+    elem = klass.new
+    expect($scratchpad[:attribute_changed]).to be(false)
+    elem[:untracked] = "test"
+    expect($scratchpad[:attribute_changed]).to be(false)
+    elem[:tracked] = "test"
+    expect($scratchpad[:attribute_changed]).to eq([:tracked, nil, "test"])
+  end
+
+  it "allows creation of custom elements in various ways" do
+    klass = create_custom_class("app-ex6")
+
+    elem = klass.new
+    expect(elem).to be_a(klass)
+    elem = $document.create_element("app-ex6")
+    expect(elem).to be_a(klass)
+    elem = DOM("<app-ex6>")
+    expect(elem).to be_a(klass)
+    elem = DOM { e("app-ex6") }
+    expect(elem).to be_a(klass)
+  end
+end

data/spec/dom/element/subclass_spec.rb

@@ -0,0 +1,144 @@
+require 'spec_helper'
+
+describe "Browser::DOM::Element subclassing" do
+  class1 = Class.new(Browser::DOM::Element) do
+    def_selector ".class1"
+
+    def hello
+      "world"
+    end
+  end
+
+  class2 = Class.new(Browser::DOM::Element::Input) do
+    def_selector "input.class2[type='text']"
+
+    def hello
+      "goodbye"
+    end
+  end
+
+  class3 = Class.new(class2) do
+    def_selector "input.class2.class3[type='text']"
+
+    def self.create(value)
+      super().tap { |elem| elem.value = value }
+    end
+  end
+
+  class4 = Class.new(Browser::DOM::Element) do
+    def_selector "custom-element"
+
+    def hello
+      text
+    end
+  end
+
+  html <<-HTML
+    <div class='class1' id='hiho'></div>
+    <input class='class2' type='text' id='hoho'></div>
+    <input class='class2' type='hidden' id='hehe'></div>
+    <custom-element id='class4'>value</custom-element>
+  HTML
+
+  it 'dispatches from DOM correctly' do
+    elem = $document.at_css('#hiho')
+    expect(elem.class).to eq(class1)
+    expect(elem.hello).to eq('world')
+
+    elem = $document.at_css('#hoho')
+    expect(elem.class).to eq(class2)
+    expect(elem.hello).to eq('goodbye')
+
+    elem = $document.at_css('#hehe')
+    expect(elem.class).to eq(Browser::DOM::Element::Input)
+  end
+
+  it 'supports creating elements correctly' do
+    elem = class1.create
+    expect(elem.class).to eq(class1)
+    expect(elem.class_name).to eq('class1')
+    expect(elem.name).to eq('DIV')
+    expect(elem.hello).to eq('world')
+
+    elem = class2.create
+    expect(elem.class).to eq(class2)
+    expect(elem.class_name).to eq('class2')
+    expect(elem.name).to eq('INPUT')
+    expect(elem.hello).to eq('goodbye')
+    expect(elem.type).to eq('text')
+  end
+
+  it 'supports nested subclassing and .create overloading' do
+    elem = class3.create('well')
+    expect(elem.class).to eq(class3)
+    expect(elem.class_name).to eq('class2 class3')
+    expect(elem.value).to eq('well')
+    expect(elem.hello).to eq('goodbye')
+  end
+
+  it 'supports custom elements' do
+    elem = $document.at_css('#class4')
+    expect(elem.class).to eq(class4)
+    expect(elem.name).to eq('CUSTOM-ELEMENT')
+    expect(elem.hello).to eq('value')
+
+    elem = class4.create
+    expect(elem.class).to eq(class4)
+    expect(elem.name).to eq('CUSTOM-ELEMENT')
+    expect(elem.hello).to eq('')
+  end
+
+  it 'works with Paggio' do
+    elem = DOM { div.class1 }
+    expect(elem.class).to eq(class1)
+    expect(elem.hello).to eq('world')
+  end
+
+  it 'works with Paggio with a .create/.new intializer' do
+    elems = DOM {
+      class1.create(self)
+      class1.new(self, attrs: { x: :y })
+      class1.new(self)
+    }
+    expect(elems.class).to eq(Browser::DOM::NodeSet)
+    expect(elems.length).to eq(3)
+    expect(elems[1][:x]).to eq(:y)
+    expect(elems.to_ary.map(&:class)).to eq([class1] * 3)
+  end
+
+  it 'works with Paggio, .create/.new and nested blocks' do
+    elem = DOM { |d|
+      class1.new(d) {
+        d.div.noticeme
+        class1.new(d) {
+          d.div.noticeme3
+        }
+        d.div.noticeme2
+      }
+    }
+    expect(elem.class).to eq(class1)
+    expect(elem.children.length).to eq(3)
+    expect(elem.children[1].class).to eq(class1)
+    expect(elem.children[1].children.length).to eq(1)
+    expect(elem.children[0].class).to eq(Browser::DOM::Element)
+    expect(elem.children[2].class).to eq(Browser::DOM::Element)
+    expect(elem.children[1].children[0].class).to eq(Browser::DOM::Element)
+  end
+
+  it 'works with Paggio, .create/.new, nested blocks and without DOM{}' do
+    elem = class1.new {
+      div.noticeme
+      class1.new(self) {
+        div.noticeme3
+      }
+      div.noticeme2
+    }
+    expect(elem.class).to eq(class1)
+    expect(elem.children.length).to eq(3)
+    expect(elem.children[1].class).to eq(class1)
+    expect(elem.children[1].children.length).to eq(1)
+    expect(elem.children[0].class).to eq(Browser::DOM::Element)
+    expect(elem.children[2].class).to eq(Browser::DOM::Element)
+    expect(elem.children[1].children[0].class).to eq(Browser::DOM::Element)
+  end
+end

data/spec/dom/element_spec.rb

@@ -178,4 +178,46 @@ describe Browser::DOM::Element do
       expect($document.at_xpath('//div', '//span', '//[@id="lol"]')).to be_a(DOM::Element)
     end
   end
+
+  describe '#shadow' do
+    html <<-HTML
+      <div id="shadowtest"></div>
+    HTML
+
+    it 'creates a shadow root' do
+      expect($document[:shadowtest].shadow?).to be(false)
+      expect($document[:shadowtest].shadow).to be_a(DOM::ShadowRoot)
+      expect($document[:shadowtest].shadow?).to be(true)
+    end
+
+    it 'accesses a shadow root' do
+      $document[:shadowtest].shadow # Create one
+      expect($document[:shadowtest].shadow?).to be(true)
+      expect($document[:shadowtest].shadow).to be_a(DOM::ShadowRoot)
+    end
+
+    it 'works like a typical opal-browser DOM tree' do
+      DOM {
+        div.shadow_item "Hello world!"
+      }.append_to($document[:shadowtest].shadow)
+      
+      expect($document[:shadowtest].at_css(".shadow_item")).to be_nil
+      expect($document[:shadowtest].shadow.at_css(".shadow_item").text).to be("Hello world!")
+    end
+
+    it 'supports stylesheets' do
+      $document[:shadowtest].shadow << CSS {
+        rule("p") {
+          color "rgb(255, 0, 0)"
+        }
+        rule(":host") {
+          color "rgb(0, 0, 255)"
+        }
+      } << DOM { p }
+
+      expect($document[:shadowtest].shadow.at_css("p").style!.color).to be("rgb(255, 0, 0)")
+      expect($document[:shadowtest].style!.color).to be("rgb(0, 0, 255)")
+      expect($document[:shadowtest].shadow.stylesheets.count).to be(1)
+    end
+  end
 end