clearwater 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4d5baa8070083b2dd17e375a1cb25f73aa7373b9
-  data.tar.gz: e6e5f345cc9216fcba43b56065e63e9429d9eba3
+  metadata.gz: 5d75fcebb1932de023f32ad43613c30907bfed76
+  data.tar.gz: 1b0b6fba9eef8bf9539f1c7cc454af550fb40ff2
 SHA512:
-  metadata.gz: a5abfc45b771018eb5d07ee9398a0411e7a0ae305c614d8460148305b806f738bfa4e6209f2a12ea630984e49c876a2db01147027c78b2fe8ef8a05f6dd35acb
-  data.tar.gz: aa0f21f5bca2409e2818be2ce6d36df19ed7a7adac7890267adf5b894e27c501f5cfa6fd5f80c3e484c574897343f88701f82bee37711bbd5e06eef03f72bf32
+  metadata.gz: 70fac50714fb26e2600bf9e23d3ebaee2350b1500cfc21ec36265e0f8d30376e0abb7cabad394f92e5346f51211ec960060fc19d6257993a784c12365d5abf4c
+  data.tar.gz: 03a1ea608623bb899094124e71cae1708fcd40f4940d52d06de73fe570f26af8279d0e33bac731f995ac0153f031ac52c0362c0ed6ffd2e23761abddd4137197

data/lib/clearwater/version.rb

@@ -1,3 +1,3 @@
 module Clearwater
-  VERSION = "0.1.2"
+  VERSION = "0.2.0"
 end

data/opal/clearwater/application.rb

@@ -1,11 +1,13 @@
 require 'clearwater/router'
 require 'clearwater/application_registry'
+require 'browser'
 require 'browser/delay'
-require 'browser/event/pop_state'
+require 'native'
+require 'browser/event'
+require 'browser/animation_frame'
 
 module Clearwater
   class Application
-    RENDER_FPS = 60
     AppRegistry = ApplicationRegistry.new
 
     attr_reader :store, :router, :component, :api_client, :on_render
@@ -15,17 +17,17 @@ module Clearwater
     end
 
     def initialize options={}
-      @store      = options.fetch(:store)      { nil }
       @router     = options.fetch(:router)     { Router.new }
       @component  = options.fetch(:component)  { nil }
-      @api_client = options.fetch(:api_client) { nil }
       @element    = options.fetch(:element)    { nil }
+      @document   = options.fetch(:document)   { $document }
+      @window     = options.fetch(:window)     { $window }
       @on_render  = []
 
       router.application = self
-      component.router = router
+      component.router = router if component
 
-      $document.on 'visibilitychange' do
+      @document.on 'visibilitychange' do
         if @render_on_visibility_change
           @render_on_visibility_change = false
           render
@@ -33,16 +35,16 @@ module Clearwater
       end
     end
 
-    def call
+    def call &block
       AppRegistry << self
-      render_current_url
+      render_current_url &block
       watch_url
     end
 
     def watch_url
       unless @watching_url
         @watching_url = true
-        $window.on('popstate') { render_current_url }
+        @window.on('popstate') { render_current_url }
       end
     end
 
@@ -53,6 +55,8 @@ module Clearwater
 
     def render &block
       on_render << block if block
+      return if @will_render
+      @will_render = true
 
       # If the app isn't being shown, wait to render until it is.
       if `document.hidden`
@@ -60,15 +64,15 @@ module Clearwater
         return
       end
 
-      delay_render
+      animation_frame { perform_render }
 
       nil
     end
 
     def element
       @element ||= begin
-                     if `document.body != null` || `document.body != undefined`
-                       $document.body
+                     if @document.body
+                       @document.body
                      else
                        nil
                      end
@@ -77,10 +81,10 @@ module Clearwater
 
     def benchmark message
       if debug?
-        start = Time.now
+        start = `performance.now()`
         result = yield
-        finish = Time.now
-        puts "#{message} in #{(finish - start) * 1000}ms"
+        finish = `performance.now()`
+        puts "#{message} in #{(finish - start).round(3)}ms"
         result
       else
         yield
@@ -88,19 +92,11 @@ module Clearwater
     end
 
     def debug?
-      false
+      !!@debug
     end
 
-    def delay_render
-      # Throttle rendering
-      unless @next_render
-        @next_render = last_render + time_between_renders
-        now = Time.now
-        after [@next_render - now, time_between_renders].max do
-          perform_render
-          @next_render = nil
-        end
-      end
+    def debug!
+      @debug = true
     end
 
     def perform_render
@@ -108,21 +104,21 @@ module Clearwater
         raise TypeError, "Cannot render to a non-existent element. Make sure the document ready event has been triggered before invoking the application."
       end
 
-      @_virtual_dom ||= VirtualDOM::Document.new(element)
-
       rendered = benchmark('Generated virtual DOM') { component.render }
-      benchmark('Rendered to actual DOM') { @_virtual_dom.render rendered }
+      benchmark('Rendered to actual DOM') { virtual_dom.render rendered }
       @last_render = Time.now
-      on_render.each(&:call)
-      on_render.clear
+      @will_render = false
+      run_callbacks
+      nil
     end
 
-    def last_render
-      @last_render ||= Time.now - 10
+    def virtual_dom
+      @virtual_dom ||= VirtualDOM::Document.new(element)
     end
 
-    def time_between_renders
-      1 / RENDER_FPS
+    def run_callbacks
+      on_render.each(&:call)
+      on_render.clear
     end
   end
 end

data/opal/clearwater/cached_render.rb

@@ -1,14 +1,23 @@
 module Clearwater
   module CachedRender
-    def cached_render
-      if !defined?(@cached_render) || should_render?
-        @cached_render = sanitize_content(render)
-      else
-        @cached_render
-      end
+
+    def self.included base
+      %x{
+        Opal.defn(base, 'type', 'Thunk');
+        Opal.defn(base, 'render', function(prev) {
+          var self = this;
+          var should_render;
+
+          if(prev && prev.vnode && #{!should_render?(`prev`)}) {
+            return prev.vnode;
+          } else {
+            return #{sanitize_content(render)};
+          }
+        });
+      }
     end
 
-    def should_render?
+    def should_render? _
       false
     end
   end

data/opal/clearwater/component.rb

@@ -1,23 +1,10 @@
 require 'clearwater/virtual_dom'
-require 'set'
+require 'browser'
 
 module Clearwater
   module Component
     attr_accessor :router, :outlet
 
-    def self.included(klass)
-      def klass.attributes(*attrs)
-        attrs.each do |attr|
-          ivar = "@#{attr}"
-          define_method(attr) { instance_variable_get(ivar) }
-          define_method("#{attr}=") do |value|
-            instance_variable_set ivar, value
-            call
-          end
-        end
-      end
-    end
-
     def render
     end
 
@@ -142,7 +129,7 @@ module Clearwater
     end
 
     def tag tag_name, attributes=nil, content=nil
-      if !(`attributes === undefined || attributes.$$class === #{Hash} || attributes === #{nil}`)
+      if !(`attributes.$$is_hash || attributes === #{nil}`)
         content = attributes
         attributes = nil
       end
@@ -158,10 +145,6 @@ module Clearwater
       router.params_for_path(router.current_path)
     end
 
-    def param(key)
-      params[key]
-    end
-
     def sanitize_attributes attributes
       return attributes unless attributes.is_a? Hash
 
@@ -189,7 +172,7 @@ module Clearwater
 
     def sanitize_content content
       %x{
-        if(content.$$class) {
+        if(content && content.$$class) {
           if(content.$$class === Opal.Array) {
             return #{content.map { |c| `self.$sanitize_content(c)` }};
           } else if(content === Opal.nil) {
@@ -198,8 +181,8 @@ module Clearwater
             var cached_render = content.$cached_render;
             var render = content.$render;
 
-            if(cached_render && !cached_render.$$stub) {
-              return content.$cached_render();
+            if(content.type === 'Thunk' && typeof(content.render) === 'function') {
+              return content;
             } else if(render && !render.$$stub) {
               return self.$sanitize_content(content.$render());
             } else {

data/opal/clearwater/virtual_dom.rb

@@ -2,12 +2,16 @@ require 'browser'
 require 'clearwater/virtual_dom/js/virtual_dom.js'
 
 module VirtualDOM
-  def self.node(tag_name, attributes, content)
+  def self.node(tag_name, attributes=nil, content=nil)
     content = sanitize_content(content)
     attributes = HashUtils.camelize_keys(attributes).to_n
     `virtualDom.h(tag_name, attributes, content)`
   end
 
+  def self.create_element(node)
+    `virtualDom.create(node)`
+  end
+
   def self.diff first, second
     `virtualDom.diff(first, second)`
   end
@@ -18,8 +22,8 @@ module VirtualDOM
 
   def self.sanitize_content content
     %x{
-      if(content === Opal.nil) return Opal.nil;
-      if(content.$$class === Opal.Array)
+      if(content === Opal.nil || content === undefined) return null;
+      if(content.$$is_array)
         return #{content.map!{ |c| sanitize_content c }};
       return content;
     }
@@ -54,7 +58,11 @@ module VirtualDOM
 
   module StringUtils
     def self.camelize string
-      string.gsub(/_(\w)/) { |match| match.gsub(/_/, '').upcase }
+      %x{
+        return string.replace(/_(\w)/g, function(full_match, character_match) {
+          return character_match.toUpperCase();
+        })
+      }
     end
   end
 

data/spec/clearwater/application_spec.rb

@@ -0,0 +1,45 @@
+require 'clearwater'
+
+module Clearwater
+  RSpec.describe Application do
+    let(:app) {
+      Application.new(
+        component: component,
+        element: element,
+      )
+    }
+    let(:component) {
+      Class.new do
+        include Clearwater::Component
+
+        def render
+          h1('Hello world')
+        end
+      end.new
+    }
+    let(:element) { $document.create_element('div') }
+
+    it 'renders to the specified element' do
+      app.perform_render
+
+      expect(element.inner_html).to eq '<h1>Hello world</h1>'
+    end
+
+    it 'calls queued blocks after rendering' do
+      i = 1
+      app.on_render << proc { i += 1 }
+      app.on_render << proc { i += 1 }
+
+      app.perform_render
+      expect(i).to eq 3
+    end
+
+    it 'empties the block queue after rendering' do
+      app.on_render << proc { }
+
+      app.perform_render
+
+      expect(app.on_render).to be_empty
+    end
+  end
+end

data/spec/clearwater/cached_render_spec.rb

@@ -0,0 +1,46 @@
+require 'clearwater/component'
+require 'clearwater/cached_render'
+
+module Clearwater
+  describe CachedRender do
+    let(:component_class) {
+      Class.new do
+        include Clearwater::Component
+        include Clearwater::CachedRender
+
+        def initialize value
+          @value = value
+        end
+
+        def render
+          @value.to_s
+        end
+      end
+    }
+    let(:value) { double }
+    let(:component) { component_class.new(value) }
+
+    it 'memoizes the return value of render' do
+      component = component()
+
+      expect(value).to receive(:to_s)
+      %x{ component.render(component) }
+
+      component.instance_exec { @vnode = VirtualDOM.node('div', 'howdy') }
+      expect(value).not_to receive(:to_s)
+
+      2.times { `component.render(component)` }
+    end
+
+    it 'uses should_render? to determine whether to call render again' do
+      component = component()
+      def component.should_render?
+        true
+      end
+
+      expect(value).to receive(:to_s).twice
+
+      2.times { `component.render(component)` }
+    end
+  end
+end

data/spec/clearwater/router_spec.rb

@@ -0,0 +1,51 @@
+require 'clearwater/router'
+
+module Clearwater
+  RSpec.describe Router do
+    let(:component_class) {
+      Class.new do
+        include Clearwater::Component
+      end
+    }
+    let(:routed_component) { component_class.new }
+    let!(:router) {
+      component = routed_component
+      Router.new do
+        route 'articles' => component do
+          route ':article_id' => component
+        end
+      end
+    }
+
+    it 'sets the router for a routed component' do
+      expect(routed_component.router).to be router
+    end
+
+    it 'gets the params for a given path' do
+      expect(router.params_for_path('/articles/foo')).to eq article_id: 'foo'
+    end
+
+    it 'gets the components for a given path' do
+      expect(router.targets_for_path('/articles/1')).to eq [
+        routed_component, routed_component
+      ]
+
+      expect(router.targets_for_path('/articles')).to eq [routed_component]
+    end
+
+    it 'gets the current path' do
+      location = { pathname: '/foo' }
+      router = Router.new(location: location)
+
+      expect(router.current_path).to eq '/foo'
+
+      location[:pathname] = '/bar'
+
+      expect(router.current_path).to eq '/bar'
+    end
+
+    it 'gets the params from the path' do
+      expect(router.params_for_path('/articles/123')).to eq({ article_id: '123' })
+    end
+  end
+end

data/spec/component_spec.rb

@@ -0,0 +1,67 @@
+require 'clearwater/component'
+
+# When running specs from the CLI, it doesn't define this class
+unless defined? Browser::Event
+  module Browser
+    class Event
+      def initialize event
+      end
+    end
+  end
+end
+
+module Clearwater
+  RSpec.describe Component do
+    let(:component_class) {
+      Class.new do
+        include Clearwater::Component
+      end
+    }
+    let(:component) { component_class.new }
+
+    it 'provides a default render method' do
+      expect(component.render).to be_nil
+    end
+
+    Component::HTML_TAGS.each do |tag|
+      it "provides helpers for `#{tag}` elements" do
+        expect(`#{component.send(tag)}.tagName`).to eq tag.upcase
+      end
+    end
+
+    it 'sanitizes element attributes' do
+      attributes = component.sanitize_attributes({
+        class: 'foo',
+        onclick: proc { |event| expect(event).to be_a Browser::Event },
+      })
+
+      # Renames :class to :class_name
+      expect(attributes[:class_name]).to eq 'foo'
+
+      # Wraps yielded events in a Browser::Event
+      attributes[:onclick].call(`document.createEvent('MouseEvent')`)
+    end
+
+    describe 'sanitizing content' do
+      it 'sanitizes components by calling `render`' do
+        allow(component).to receive(:render) { 'foo' }
+        expect(component.sanitize_content(component)).to eq 'foo'
+      end
+
+      it 'sanitizes arrays by sanitizing each element' do
+        allow(component).to receive(:render) { 'foo' }
+        expect(component.sanitize_content([component, nil, 1])).to eq ['foo', '', 1]
+      end
+    end
+
+    it 'retrieves params from the router' do
+      router = double('Router')
+      params = { article_id: 123 }
+      allow(router).to receive(:params_for_path) { params }
+      allow(router).to receive(:current_path) { '/articles/123' }
+      component.router = router
+
+      expect(component.params).to eq params
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clearwater
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Jamie Gaskins
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-08-31 00:00:00.000000000 Z
+date: 2015-10-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: opal
@@ -53,19 +53,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '1.3'
 - !ruby/object:Gem::Dependency
-  name: rspec
+  name: opal-rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: 0.5.0.beta2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: 0.5.0.beta2
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -132,19 +132,20 @@ files:
 - lib/clearwater.rb
 - lib/clearwater/version.rb
 - opal/clearwater.rb
-- opal/clearwater/api_client.rb
 - opal/clearwater/application.rb
 - opal/clearwater/application_registry.rb
 - opal/clearwater/cached_render.rb
-- opal/clearwater/cgi.rb
 - opal/clearwater/component.rb
 - opal/clearwater/link.rb
 - opal/clearwater/router.rb
 - opal/clearwater/router/route.rb
 - opal/clearwater/router/route_collection.rb
-- opal/clearwater/store.rb
 - opal/clearwater/virtual_dom.rb
 - opal/clearwater/virtual_dom/js/virtual_dom.js
+- spec/clearwater/application_spec.rb
+- spec/clearwater/cached_render_spec.rb
+- spec/clearwater/router_spec.rb
+- spec/component_spec.rb
 homepage: https://clearwater-rb.github.io/
 licenses:
 - MIT
@@ -169,5 +170,9 @@ rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: Front-end web framework built on Opal
-test_files: []
+test_files:
+- spec/clearwater/application_spec.rb
+- spec/clearwater/cached_render_spec.rb
+- spec/clearwater/router_spec.rb
+- spec/component_spec.rb
 has_rdoc: 

data/opal/clearwater/api_client.rb

@@ -1,90 +0,0 @@
-require "clearwater/cgi"
-require "browser/http"
-
-module Clearwater
-  class APIClient
-    ResponseNotFinished = Class.new(RuntimeError)
-
-    attr_reader :base_url
-
-    def initialize attributes={}
-      @base_url = attributes.fetch(:base_url) { nil }
-    end
-
-    def fetch resource, id, params
-      response = Browser::HTTP.get(path_for_resource(resource, id, params))
-      Response.new(response)
-    end
-
-    def store resource, id, data={}
-      path = case id
-             when String, Numeric
-               path_for_resource(resource, id)
-             when Hash
-               data.merge! id
-               path_for_resource(resource)
-             end
-
-      response = Browser::HTTP.post(path, data)
-      Response.new(response)
-    end
-
-    def update resource, id, data
-      response = Browser::HTTP.patch path_for_resource(resource, id), data: data
-      Response.new(response)
-    end
-
-    def delete resource, id
-      response = Browser::HTTP.delete path_for_resource(resource, id)
-      Response.new(response)
-    end
-
-    private
-
-    def path_for_resource resource, id, params={}
-      path = "#{base_url}/#{resource}"
-      case id
-      when String, Numeric
-        path += "/#{id}"
-      when Hash
-        params.merge! id
-      end
-
-      if params.any?
-        path += "?#{query_string(params)}"
-      end
-
-      path
-    end
-
-    def query_string params
-      query_params = params.map { |key, value|
-        "#{CGI.escape(key)}=#{CGI.escape(value)}"
-      }.join("&")
-    end
-
-    class Response
-      attr_reader :response
-
-      def initialize response
-        @response = response
-      end
-
-      def then
-        response.then do |r|
-          yield self.class.new(r)
-        end
-      end
-
-      def fail
-        response.fail do |r|
-          yield self.class.new(r)
-        end
-      end
-
-      def json
-        response.json
-      end
-    end
-  end
-end

data/opal/clearwater/cgi.rb

@@ -1,14 +0,0 @@
-module Clearwater
-  class CGI
-    def self.escape string
-      # string.gsub(/([^ a-zA-Z0-9_.-]+)/) do |ch|
-      string.chars.map do |ch|
-        if ch =~ /([^ a-zA-Z0-9_.-]+)/
-          "%#{ch.ord.to_s(16).upcase}"
-        else
-          ch
-        end
-      end.join.tr(" ", "+")
-    end
-  end
-end

data/opal/clearwater/store.rb

@@ -1,99 +0,0 @@
-require "json"
-
-module Clearwater
-  class Store
-    attr_reader :mapping, :identity_map
-
-    def initialize options={}
-      @url = options.fetch(:url) { "/api/:model/:id" }
-      @mapping = Mapping.new(options.fetch(:mapping) { {} })
-      @protocol = options.fetch(:protocol) { HTTP }
-      @identity_map = IdentityMap.new
-    end
-
-    def all klass
-      deserialized = api(:get, url_for(klass)).body
-      models = JSON.parse(deserialized).map do |attributes|
-        deserialize(klass, attributes)
-      end
-    end
-
-    def find klass, id
-      identity_map.fetch(klass, id) do
-        serialized = api(:get, url_for(klass, id)).body
-        identity_map[klass][id] = deserialize(klass, JSON.parse(serialized))
-      end
-    end
-
-    def save model
-      method = persisted?(model) ? :patch : :post
-      response = api method, url_for_model(model)
-      if method == :post && response.ok
-        attributes = JSON.parse(response.body)
-        model.instance_variable_set :@id, attributes[:id]
-      end
-    end
-
-    def delete model
-      api :delete, url_for_model(model)
-    end
-
-    def persisted? model
-      !!model.id
-    end
-
-    private
-
-    def api method, url
-      @protocol.public_send method, url
-    end
-
-    def url_for klass, id=nil
-      @url.gsub(":model", mapping[klass])
-          .gsub(":id", id.to_s)
-    end
-
-    def url_for_model model
-      url_for(model.class, model.id)
-    end
-
-    def url_for_class klass, id
-      url_for(klass, nil)
-    end
-
-    def deserialize klass, attributes
-      model = klass.allocate
-      attributes.each do |attr, value|
-        model.instance_variable_set "@#{attr}", value
-      end
-
-      model
-    end
-  end
-
-  class Mapping
-    def initialize mappings={}
-      @custom_mappings = mappings
-    end
-
-    def [] klass
-      @custom_mappings.fetch(klass) { |*args|
-        klass.name.downcase.gsub("::", "/") + "s"
-      }
-    end
-  end
-
-  class IdentityMap
-    def initialize
-      @map = Hash.new { |h, k| h[k] = {} }
-    end
-
-    def [] key
-      @map[key]
-    end
-
-    def fetch(klass, id, &block)
-      self[klass].fetch(id, &block)
-    end
-  end
-end