reactrb 0.7.42

data/example/examples/app/reuse.rb

@@ -0,0 +1,59 @@
+class ColorList
+  
+  # An important part of building a reusable component is being able to pass in other components.
+  # 
+  # Any component that has a block will receive all of the elements (nodes) generated in that block as children.
+  # These are accessed through the special "children" param which returns a enumerator.
+  #
+  # In some cases it is clearer to pass the child as a parameter.  In this case the child is accessed in
+  # the normal way by using the named parameter method.
+  #
+  # The ColorList component demonstrates both ways to pass children to a component.  ColorList takes three
+  # parameters - a list of color styles that will be used in sequence when rendering the list, and an optional
+  # header and footer that will be rendered before and after the list.
+  # 
+  # Each of the children provided in the block will be displayed in order with a different color taken from the color list.
+  
+  include React::Component
+  
+  required_param :colors, type: [String]          # note the use of typing which is not required, but useful for debugging 
+  optional_param :header, type: React::Element    # [String] means and array of strings
+  optional_param :footer, type: React::Element
+    
+  def render
+    div do 
+      # sending the render method will place the element into the render buffer
+      header.render if header
+      ul do
+        # children is an enumerable, so any method such as each, each_with_index, etc will work
+        children.each_with_index do |child, i|  
+          ul do
+            # render will take a param list, and if present will cause the child to be cloned, and the 
+            # additional params will be shallow merged with any existing params
+            child.render(style: {color: colors[i % colors.length]})
+          end
+        end
+      end
+      footer.render if footer
+    end
+  end
+  
+end
+
+class Reuse 
+  
+  include React::Component
+  
+  def render
+    ColorList(colors: [:red, :blue, :green], header: h1 {"I am the child header passed as a param"}) do
+      # we are going to pass 5 child elements to our ColorList as well as the header
+      "I am the first item".span   # note the alternative to span { "..." }
+      "I am the second item".span
+      ColorList(colors: [:pink, :yellow]) {"I am a nested guy".span; "and so am i".span}
+      "I am the fourth item".span
+      div {"I am a div item".br; "with 2 lines"}
+    end
+  end 
+  
+end
+        

data/example/examples/app/show.rb

@@ -0,0 +1,52 @@
+require 'opal'
+require 'browser/interval'      # gives us wrappers on javascript methods such as setTimer and setInterval
+require 'jquery'
+require 'opal-jquery'  # gives us a nice wrapper on jQuery which we will use mainly for HTTP calls
+require "json"         # json conversions
+require 'reactive-ruby'   # and the whole reason we are gathered here today!
+require 'react-router'
+require 'reactive-router'
+require 'basics'
+require 'reuse'
+require 'items'
+require 'rerendering'
+require 'nodes'
+require 'react_api_demo'
+
+
+class Show
+
+  include React::Router
+
+  backtrace :on
+
+  routes(path: "/") do
+    route(path: "basics", name: "basics", handler: Basics)
+    route(path: "reuse", name: "reuse", handler: Reuse)
+    route(path: "rerendering", name: "rerendering", handler: Rerendering)
+    route(path: "nodes", name: "nodes", handler: Nodes)
+    route(path: "api_demo", name: "api_demo", handler: ReactAPIDemo)
+    redirect(from: "/", to: "basics")
+  end
+
+  def show
+    puts "mounted the show method"
+    div do
+      div do
+        link(to: "basics") { "Basics" }; br
+        link(to: "reuse") { "Reusable Components" }; br
+        link(to: "rerendering") { "Rerendering Test" }; br
+        link(to: "nodes") { "Saving and using rendered nodes" }; br
+        link(to: "api_demo") { "Low Level React API" }; br
+      end
+    route_handler
+    end
+  end
+
+end
+
+Document.ready? do
+
+  React.render(React.create_element(Show), Element['#content'])
+
+end

data/example/examples/config.ru

@@ -0,0 +1,38 @@
+# config.ru
+require 'bundler'
+Bundler.require
+
+Opal::Processor.source_map_enabled = true
+
+opal = Opal::Server.new {|s|
+  s.append_path './app'
+  s.main = 'example'
+  s.debug = true
+}
+
+map opal.source_maps.prefix do
+  run opal.source_maps
+end rescue nil
+
+map '/assets' do
+  run opal.sprockets
+end
+
+get '/*' do
+  example = "show"
+  <<-HTML
+    <!doctype html>
+    <html>
+      <head>
+        <title>Example: #{example}.rb</title>
+        <script src="/assets/#{example}.js"></script>
+        <script>#{Opal::Processor.load_asset_code(opal.sprockets, example+".js")}</script>
+      </head>
+      <body>
+        <div id="content"></div>
+      </body>
+    </html>
+  HTML
+end
+
+run Sinatra::Application

data/example/rails-tutorial/.gitignore

@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+#   git config --global core.excludesfile '~/.gitignore_global'
+
+# Ignore bundler config.
+/.bundle
+
+# Ignore the default SQLite database.
+/db/*.sqlite3
+/db/*.sqlite3-journal
+
+# Ignore all logfiles and tempfiles.
+/log/*
+!/log/.keep
+/tmp

data/example/rails-tutorial/Gemfile

@@ -0,0 +1,51 @@
+source 'https://rubygems.org'
+
+gem 'therubyracer', platforms: :ruby
+gem 'react-rails'
+gem 'opal-rails'
+
+# integrates opal with sprockets etc
+gem 'reactive-ruby', path: "../.."
+
+# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
+gem 'rails', '4.2.3'
+# Use sqlite3 as the database for Active Record
+gem 'sqlite3'
+# Use SCSS for stylesheets
+gem 'sass-rails', '~> 5.0'
+# Use Uglifier as compressor for JavaScript assets
+gem 'uglifier', '>= 1.3.0'
+# Use CoffeeScript for .coffee assets and views
+gem 'coffee-rails', '~> 4.1.0'
+# See https://github.com/rails/execjs#readme for more supported runtimes
+# gem 'therubyracer', platforms: :ruby
+
+# Use jquery as the JavaScript library
+gem 'jquery-rails'
+# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
+gem 'turbolinks'
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem 'jbuilder', '~> 2.0'
+# bundle exec rake doc:rails generates the API under doc/api.
+gem 'sdoc', '~> 0.4.0', group: :doc
+
+# Use ActiveModel has_secure_password
+# gem 'bcrypt', '~> 3.1.7'
+
+# Use Unicorn as the app server
+# gem 'unicorn'
+
+# Use Capistrano for deployment
+# gem 'capistrano-rails', group: :development
+
+
+group :development, :test do
+  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
+  gem 'byebug'
+
+  # Access an IRB console on exception pages or by using <%= console %> in views
+  gem 'web-console', '~> 2.0'
+
+  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
+  gem 'spring'
+end

data/example/rails-tutorial/README.rdoc

@@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.

data/example/rails-tutorial/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Rails.application.load_tasks

data/example/rails-tutorial/app/assets/javascripts/application.rb

@@ -0,0 +1,15 @@
+#assets/javascript/application.rb
+
+# only put files that are browser side only.
+
+require 'components'  # this pulls in your components from the components.rb manifest file  
+require 'react_ujs'   # this is required on the client side only and is part of the prerendering system
+
+# require any thing else that is browser side only, typically  these 4 are all you need.  If you
+# have client only sections of code that that do not contain requires wrap them in 
+# if React::IsomorphicHelpers.on_opal_client? blocks.  
+
+require 'jquery'           # you need both these files to access jQuery from Opal
+require 'opal-jquery'      # they must be in this order, and after the components require
+require 'browser/interval' # for #every, and #after methods
+

data/example/rails-tutorial/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/example/rails-tutorial/app/controllers/application_controller.rb

@@ -0,0 +1,6 @@
+class ApplicationController < ActionController::Base
+  # Prevent CSRF attacks by raising an exception.
+  # For APIs, you may want to use :null_session instead.
+  protect_from_forgery with: :exception
+  
+end

data/example/rails-tutorial/app/controllers/home_controller.rb

@@ -0,0 +1,6 @@
+# controllers/home_controller.rb
+class HomeController < ApplicationController
+  def show
+    render_component  "Show", say_hello_to: params[:say_hello_to] # by default render_component will use the controller name to find the appropriate component
+  end
+end

data/example/rails-tutorial/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/example/rails-tutorial/app/views/components.rb

@@ -0,0 +1,3 @@
+require 'opal'
+require 'reactive-ruby'
+require_tree './components'

data/example/rails-tutorial/app/views/components/home/show.rb

@@ -0,0 +1,47 @@
+# app/views/components/home/show.rb
+
+module Components
+
+  module Home
+
+    class Show
+
+      include React::Component   # will create a new component named Show
+
+      optional_param :say_hello_to
+      backtrace :on
+      def render
+        puts "Rendering my first component!"
+        List(first_element: div { "bhwahaha" }) do
+          "hello #{'there '+say_hello_to if say_hello_to}".span # render "hello" with optional 'there ...'
+          "goodby".span
+        end
+      end
+
+    end
+
+    class List
+
+      include React::Component
+
+      required_param :first_element #, type: React::Element
+
+      backtrace :on
+
+      def render
+        ul do
+          li do
+            first_element.render
+          end
+          children.each do |child|
+            li do
+              child.render(style: {color: :green})
+              child.render(style: {color: :red})
+            end
+          end
+        end
+      end
+    end
+  end
+
+end

data/example/rails-tutorial/app/views/layouts/application.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tutorial</title>
+  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/example/rails-tutorial/bin/bundle

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+load Gem.bin_path('bundler', 'bundle')

data/example/rails-tutorial/bin/rails

@@ -0,0 +1,8 @@
+#!/usr/bin/env ruby
+begin
+  load File.expand_path("../spring", __FILE__)
+rescue LoadError
+end
+APP_PATH = File.expand_path('../../config/application', __FILE__)
+require_relative '../config/boot'
+require 'rails/commands'

data/example/rails-tutorial/bin/rake

@@ -0,0 +1,8 @@
+#!/usr/bin/env ruby
+begin
+  load File.expand_path("../spring", __FILE__)
+rescue LoadError
+end
+require_relative '../config/boot'
+require 'rake'
+Rake.application.run

data/example/rails-tutorial/bin/setup

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+require 'pathname'
+
+# path to your application root.
+APP_ROOT = Pathname.new File.expand_path('../../',  __FILE__)
+
+Dir.chdir APP_ROOT do
+  # This script is a starting point to setup your application.
+  # Add necessary setup steps to this file:
+
+  puts "== Installing dependencies =="
+  system "gem install bundler --conservative"
+  system "bundle check || bundle install"
+
+  # puts "\n== Copying sample files =="
+  # unless File.exist?("config/database.yml")
+  #   system "cp config/database.yml.sample config/database.yml"
+  # end
+
+  puts "\n== Preparing database =="
+  system "bin/rake db:setup"
+
+  puts "\n== Removing old logs and tempfiles =="
+  system "rm -f log/*"
+  system "rm -rf tmp/cache"
+
+  puts "\n== Restarting application server =="
+  system "touch tmp/restart.txt"
+end