roda-component 0.0.10 → 0.1.0

data/lib/roda/component/version.rb

@@ -1,5 +1,5 @@
 class Roda
   class Component
-    VERSION = "0.0.10"
+    VERSION = "0.1.0"
   end
 end

data/lib/roda/plugins/component.rb

@@ -3,7 +3,6 @@ require 'faye'
 require 'faye/redis'
 require 'roda/component'
 require 'roda/component/faye'
-require 'roda/component/ohm'
 require 'json'
 require "base64"
 
@@ -12,8 +11,6 @@ class Roda
     module Component
       def self.load_dependencies(app, opts={})
         Faye::WebSocket.load_adapter('thin')
-
-        # app.plugin :csrf, header: 'X-CSRF-TOKEN'
       end
 
       def self.configure(app, opts={})
@@ -33,6 +30,7 @@ class Roda
         opts[:class_name]      ||= {}
         opts[:events]          ||= {}
         opts[:user_model]      ||= 'User'
+        opts[:redis_uri]       ||= 'redis://localhost:6379'
         opts[:redis_namespace] ||= 'roda:component:'
         opts[:cache][:tmpl]    ||= {}
 
@@ -49,7 +47,7 @@ class Roda
           }
         })
 
-        Roda::Component::Ohm.redis = Redic.new opts[:redis_uri]
+        # Roda::Component::Ohm.redis = Redic.new opts[:redis_uri] || 'redis://localhost:6379'
 
         # Set the current app
         opts[:class].set_app app
@@ -84,9 +82,12 @@ class Roda
             end
 
             unless $component_opts[:comp][:"#{comp_name}"]
-              c = $component_opts[:comp][:"#{comp_name}"] = #{comp.class}.new
-              c.cache = JSON.parse Base64.decode64('#{cache}')
-              c.#{action}(JSON.parse(Base64.decode64('#{options}')))
+              Document.ready? do
+                c = $component_opts[:comp][:"#{comp_name}"] = #{comp.class}.new
+                c.instance_variable_set(:@_cache, JSON.parse(Base64.decode64('#{cache}')))
+                c.#{action}(JSON.parse(Base64.decode64('#{options}')))
+                c.events.trigger_jquery_events
+              end
             end
           EOF
 
@@ -96,8 +97,8 @@ class Roda
         def component name, options = {}, &block
           comp = load_component name
 
-          action  = options[:call]    || :display
-          trigger = options[:trigger] || false
+          action  = options.delete(:call)    || :display
+          trigger = options.delete(:trigger) || false
 
           # call action
           # TODO: make sure the single method parameter isn't a block
@@ -117,14 +118,17 @@ class Roda
             end
           end
 
-          if req && !req.env['RODA_COMPONENT_FROM_FAYE']
+          if request && !request.env['RODA_COMPONENT_FROM_FAYE']
             if comp_response.is_a? Roda::Component::DOM
-              content = comp_response.to_html
+              content = comp_response.to_xml
             else
-              content = comp_response.to_s
+              content = comp_response
             end
 
-            content += load_component_js comp, action
+            unless request.env.include? 'HTTP_X_RODA_COMPONENT_ON_SERVER'
+              content = content.to_s
+              content += load_component_js comp, action
+            end
 
             content
           else
@@ -171,18 +175,25 @@ class Roda
           on self.class.component_assets_route_regex do |component, action|
             # Process the ruby code into javascript
             Opal::Processor.source_map_enabled = false
-            env = Opal::Environment.new
-            # Append the gems path
-            env.append_path Dir.pwd
-            env.append_path Gem::Specification.find_by_name("roda-component").gem_dir + '/lib'
-            env.append_path Gem::Specification.find_by_name("scrivener-cj").gem_dir + '/lib'
-            js = env['roda/component'].to_s
-            # Append the path to the components folder
-            env.append_path scope.component_opts[:path]
+
+            opal = Opal::Server.new do |s|
+              # Append the gems path
+              s.append_path Dir.pwd
+              s.append_path Gem::Specification.find_by_name("roda-component").gem_dir + '/lib'
+              # s.append_path Gem::Specification.find_by_name("scrivener-cj").gem_dir + '/lib'
+              # Append the path to the components folder
+              s.append_path scope.component_opts[:path]
+
+              s.main = 'application'
+            end
+
+            sprockets = opal.sprockets
+
+            js = sprockets['roda/component'].to_s
             # Loop through and and convert all the files to javascript
             Dir[scope.component_opts[:path] + '/**/*.rb'].each do |file|
               file = file.gsub(scope.component_opts[:path] + '/', '')
-              js << env[file].to_s
+              js << sprockets[file].to_s
             end
             # Set the header to javascript
             response.headers["Content-Type"] = 'application/javascript; charset=UTF-8'
@@ -191,12 +202,31 @@ class Roda
           end
 
           on self.class.component_route_regex do |comp, type, action|
+            if scope.request.env.include? 'HTTP_X_RODA_COMPONENT_ON_SERVER'
+              data = JSON.parse scope.request.body.read
+            else
+              data = {}
+            end
+
             case type
             when 'call'
-              scope.roda_component(comp, call: action)
+              data[:call] = action
             when 'trigger'
-              scope.roda_component(comp, trigger: action)
+              data[:trigger] = action
+            end
+
+            res = scope.roda_component(comp, data)
+
+            scope.response.headers["NEW-CSRF"] = scope.csrf_token
+
+            if res.is_a? Hash
+              scope.response.headers["Content-Type"] = 'application/json; charset=UTF-8'
+              res = res.to_json
+            else
+              res = res.to_s
             end
+
+            res
           end
         end
       end

data/roda-component.gemspec

@@ -18,15 +18,25 @@ Gem::Specification.new do |spec|
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ["lib"]
 
-  spec.add_runtime_dependency "opal"
-  spec.add_runtime_dependency "opal-jquery"
+  spec.add_runtime_dependency "opal", "~> 0.7.0.beta3"
+  spec.add_runtime_dependency "opal-jquery", "~> 0.3.0.beta1"
+  spec.add_runtime_dependency "redis-rack"
   spec.add_runtime_dependency "faye"
   spec.add_runtime_dependency "faye-redis"
-  spec.add_runtime_dependency "tilt"
-  spec.add_runtime_dependency "rack_csrf"
-  spec.add_runtime_dependency "ohm"
-  spec.add_runtime_dependency "ohm-contrib"
-  spec.add_runtime_dependency "ohm-sorted"
+  spec.add_runtime_dependency "redic", "~> 1.1.1"
   spec.add_development_dependency "bundler", "~> 1.7"
   spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "pry-test", "~> 0.5.5"
+  spec.add_development_dependency "roda", "~> 1.1.0"
+  spec.add_development_dependency "thin"
+  spec.add_development_dependency "pry"
+  spec.add_development_dependency "pry-rescue"
+  spec.add_development_dependency "pry-byebug"
+  spec.add_development_dependency "pry-stack_explorer"
+  spec.add_development_dependency "pry-doc"
+  spec.add_development_dependency "awesome_print"
+  spec.add_development_dependency "hirb"
+  spec.add_development_dependency "rubocop"
+  spec.add_development_dependency "rack-unreloader"
+  spec.add_development_dependency "poltergeist", "~> 1.5.1"
 end

data/test/component_test.rb

@@ -1,11 +1,26 @@
 require_relative 'helper'
 
-scope 'component' do
-  test 'app' do
-    assert body('/app')['working']
-  end
+class ComponentTest < PryTest::Test
+
+  before { @page = Capybara::Session.new(:poltergeist, TestApp) }
 
   test 'render' do
-    assert body('/')['head']
+    @page.visit '/'
+    assert @page.html['head']
+    assert @page.html["Generated by Opal"]
   end
+
+  test 'tmpl' do
+    @page.visit '/theme'
+    # Make sure the about title isn't there
+    assert !@page.html['"about-title"']
+    # Clicking the link should show the about title
+    @page.click_link 'Show About Title'
+    # Remove the link from the dom after it's clicked
+    assert !@page.html['Show About Title']
+    # Should see the title
+    assert @page.html['"about-title"']
+  end
+
+  after { Capybara.reset_sessions! }
 end

data/test/dummy/.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory" : "public/chat/bower"
+}

data/test/dummy/app.rb

@@ -1,21 +1,111 @@
+unless defined? RACK_ENV
+  ENV.fetch('LC_ALL') {'en_US.utf8'}.freeze
+  RACK_ENV   = ENV.fetch('RACK_ENV') { 'test' }.freeze
+  DUMMY_PATH = "#{Dir.pwd}/" << (RACK_ENV == 'test' ? 'test/dummy/components' : 'components').freeze
+end
+
+require 'sass'
+require 'tilt'
+require 'roda'
+require 'nokogiri'
+require 'shield'
+require 'sequel'
+require 'roda/component'
+require 'binding_of_caller'
+require 'better_errors'
+
+# BetterErrors.application_root = __dir__
+# BetterErrors::Middleware.allow_ip! "0.0.0.0/0"
+
 class TestApp < Roda
-  plugin :component, {
-    path: './test/dummy/components'
+  include Shield::Helpers
+
+  path = DUMMY_PATH
+
+  DB = Sequel.connect('sqlite://dummy.db')
+
+  unless DB.table_exists?(:users)
+    DB.create_table :users do
+      primary_key :id
+      String :first_name
+      String :last_name
+      String :email
+      String :crypted_password
+    end
+  end
+
+  # use BetterErrors::Middleware
+  use Shield::Middleware, "/login"
+  use Rack::Session::Cookie,
+    key:    "test:roda:components",
+    secret: "na"
+
+  plugin :csrf, header: 'X-CSRF-TOKEN', skip: ['POST:/faye']
+  plugin :component, { path: path, token: '687^*&SAD876asd87as6d*&8asd' }
+  plugin :assets, {
+    path: "#{path}/../public/chat",
+    css_dir: '',
+    js_dir: '',
+    css: [
+      'bower/open-sans-fontface/open-sans.css',
+      'bower/font-awesome/css/font-awesome.css',
+      'bower/jScrollPane/style/jquery.jscrollpane.css',
+      'css/style.css',
+      'css/login.scss'
+    ],
+    js: [
+      'bower/jquery/dist/jquery.js',
+      'bower/jScrollPane/script/jquery.mousewheel.js',
+      'bower/jScrollPane/script/jquery.jscrollpane.js'
+    ]
   }
 
+  def current_user
+    authenticated(Models::User)
+  end
+
   route do |r|
     r.components
+    r.assets
 
-    r.on 'app' do
-      'working'
+    %w(js css img).each do |type|
+      r.on(type) { r.run Rack::Directory.new("#{path}/../public/chat/#{type}") }
     end
 
-    r.root do
-      component(:layout) do
-        'Hello, World!'
+    r.on('assets') { r.run Rack::Directory.new("#{path}/../public/chat") }
+
+    r.on('assets/font-awesome-4.1.0/fonts') do
+      r.run Rack::Directory.new("#{path}/../public/chat/font-awesome-4.1.0/fonts")
+    end
+
+    r.root { component(:chat) }
+
+    r.on('login') { component(:login) }
+    r.on('logout') { component(:login, call: :logout) }
+
+    r.on 'session/:key/:value' do |key, value|
+      session[key] = value
+      response.write '<h3>Added:</h3>'
+      response.write "<div><b>#{key}</b>: #{value}</div>"
+    end
+
+    r.on 'session/:key' do |key|
+      session.delete key
+      response.write '<h3>Deleted:</h3>'
+      response.write "<div><b>#{key}</b></div>"
+    end
+
+    r.on 'session' do
+      session.each do |key, value|
+        response.write "<div><b>#{key}</b>: #{value}</div>"
+      end
+      response.write '<br><br><br><br>'
+
+      request.env.each do |key, value|
+        response.write "<div><b>#{key}</b>: #{value}</div>"
       end
     end
   end
-
-  Dir["./test/dummy/components/*.rb"].each { |file| require file }
 end
+
+Dir["#{DUMMY_PATH}/**/*.rb"].sort.each { |file| require file }

data/test/dummy/bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "dummy",
+  "version": "0.0.10",
+  "homepage": "https://github.com/cj/roda-component",
+  "authors": [
+    "cj <cjlazell@gmail.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "public/chat/bower",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "font-awesome": "~4.2.0",
+    "jScrollPane": "~2.0.20"
+  }
+}

data/test/dummy/components/chat.rb

@@ -0,0 +1,50 @@
+class ChatComponent < Roda::Component
+  comp_name :chat
+  comp_html "../public/chat/index.html"
+
+  def display
+    return unless server?
+
+    request.redirect 'login' unless current_user
+
+    dom.find('.my-account .name span').html current_user.full_name
+
+    component(:layout) do
+      dom.find('body').html
+    end
+  end
+
+  on :reconnect do
+    puts 'reconnected'
+  end
+
+  on :disconnect do
+    puts 'disconnected'
+  end
+
+  on :connect do
+    puts 'connected'
+  end
+
+  on :join do |data|
+    return user_details unless client?
+
+    `console.log(#{data});`
+    puts 'joined'
+  end
+
+  on :leave do |data|
+    return user_details unless client?
+
+    `console.log(#{data});`
+    puts 'leave'
+  end
+
+  def user_details
+    {
+      id: current_user.id,
+      first_name: current_user.first_name,
+      last_name: current_user.last_name
+    }
+  end
+end

data/test/dummy/components/forms/login.rb

@@ -0,0 +1,20 @@
+require 'roda/component/form'
+
+module Forms
+  class Login < Roda::Component::Form
+    attr_accessor :email, :password, :password_confirmation, :first_name, :last_name, :signup
+
+    def validate
+      assert_present :email
+      assert_email :email
+      assert_present :password
+
+      if signup
+        assert_present :first_name
+        assert_present :last_name
+        assert_present :password_confirmation
+        assert_equal :password_confirmation, password
+      end
+    end
+  end
+end

data/test/dummy/components/layout.rb

@@ -1,10 +1,30 @@
 class LayoutComp < Roda::Component
-  name :layout
-  html './test/dummy/public/index.html'
+  comp_name :layout
+  comp_html "../public/chat/index.html"
+  comp_setup do |dom|
+    # remove hard coded links as we are adding them in using the assets plugin.
+    dom.css('head > link').remove
+    # add require css and javascript
+    dom.at_css('head').add_child assets(:css)
+    dom.at_css('html').add_child assets(:js)
+    dom.at_css('html').add_child <<-EOF
+      <script type="text/javascript" src="/assets/components"></script>
+      <script type="text/javascript" src="/faye/client.js"></script>
+    EOF
+
+  end
 
   def display data, &block
     if server?
+      body_class = data.delete :body_class
+
+      # we need this so that roda-components can authenticate your sessions
+      dom.at_css('head').add_child csrf_metatag
+
       dom.find('body').html(yield)
+
+      dom.at('body')['class'] = body_class if body_class
+
       dom
     end
   end