react.rb 0.0.1

data/example/react-tutorial/public/base.css

@@ -0,0 +1,62 @@
+body {
+  background: #fff;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
+  font-size: 15px;
+  line-height: 1.7;
+  margin: 0;
+  padding: 30px;
+}
+
+a {
+  color: #4183c4;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background-color: #f8f8f8;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+  font-size: 12px;
+  margin: 0 2px;
+  padding: 0px 5px;
+}
+
+h1, h2, h3, h4 {
+  font-weight: bold;
+  margin: 0 0 15px;
+  padding: 0;
+}
+
+h1 {
+  border-bottom: 1px solid #ddd;
+  font-size: 2.5em;
+  font-weight: bold;
+  margin: 0 0 15px;
+  padding: 0;
+}
+
+h2 {
+  border-bottom: 1px solid #eee;
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.2em;
+}
+
+p, ul {
+  margin: 15px 0;
+}
+
+ul {
+  padding-left: 30px;
+}

data/example/todos/Gemfile

@@ -0,0 +1,11 @@
+source 'https://rubygems.org'
+
+gem 'rake'
+gem 'opal',           :github => 'opal/opal', :ref => '85220f32136c74ac93f1cb721462324a3423cf44'
+gem 'opal-jquery',    :github => 'opal/opal-jquery'
+gem 'vienna',         :github => 'opal/vienna', :ref => '593335cbd7fb99ce471fa720e9b9c849d99b8dda'
+gem 'opal-haml',      :github => 'opal/opal-haml'
+gem 'opal-rspec',     '0.3.0.beta2'
+gem 'react.rb', :path => "../.."
+gem 'thin'
+gem 'react-source'

data/example/todos/Gemfile.lock

@@ -0,0 +1,84 @@
+GIT
+  remote: git://github.com/opal/opal-haml.git
+  revision: 0bdd3eb53ec03d380e14440a94f779ed7c3741e1
+  specs:
+    opal-haml (0.2.0)
+      haml
+      opal (>= 0.5.0, < 1.0.0)
+
+GIT
+  remote: git://github.com/opal/opal-jquery.git
+  revision: 1814202085f168176231b877b2b7a967b75b0726
+  specs:
+    opal-jquery (0.1.2)
+      opal (>= 0.5.0, < 1.0.0)
+
+GIT
+  remote: git://github.com/opal/opal.git
+  revision: 85220f32136c74ac93f1cb721462324a3423cf44
+  ref: 85220f32136c74ac93f1cb721462324a3423cf44
+  specs:
+    opal (0.6.0)
+      source_map
+      sprockets
+
+GIT
+  remote: git://github.com/opal/vienna.git
+  revision: 593335cbd7fb99ce471fa720e9b9c849d99b8dda
+  ref: 593335cbd7fb99ce471fa720e9b9c849d99b8dda
+  specs:
+    vienna (0.0.2)
+      opal (>= 0.5.0, < 1.0.0)
+      opal-activesupport
+      opal-jquery
+
+PATH
+  remote: ../..
+  specs:
+    react.rb (0.0.1)
+      opal (~> 0.6.0)
+      opal-activesupport
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    daemons (1.1.9)
+    eventmachine (1.0.3)
+    haml (4.0.5)
+      tilt
+    hike (1.2.3)
+    json (1.8.2)
+    multi_json (1.10.1)
+    opal-activesupport (0.1.0)
+      opal (>= 0.5.0, < 1.0.0)
+    opal-rspec (0.3.0.beta2)
+      opal (>= 0.6.0, < 1.0.0)
+    rack (1.5.2)
+    rake (10.1.1)
+    react-source (0.12.2)
+    source_map (3.0.1)
+      json
+    sprockets (2.12.3)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    thin (1.6.2)
+      daemons (>= 1.0.9)
+      eventmachine (>= 1.0.0)
+      rack (>= 1.0.0)
+    tilt (1.4.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  opal!
+  opal-haml!
+  opal-jquery!
+  opal-rspec (= 0.3.0.beta2)
+  rake
+  react-source
+  react.rb!
+  thin
+  vienna!

data/example/todos/README.md

@@ -0,0 +1,37 @@
+# react.rb-todos
+
+Modify from original version of [Opal-Todos](https://github.com/opal/opal-todos)
+
+## Running
+
+Get dependencies:
+
+```
+$ bundle install
+```
+
+Run the sprockets based server for auto-compiling:
+
+```
+$ bundle exec rackup
+```
+
+Open `http://localhost:9292` in the browser.
+
+## Code Overview
+
+Opal comes with sprockets support built in, so using rack we can have an
+easy to boot build system to handle all opal dependencies. If you look
+in `index.html.erb`, you will see a call to `javascript_include_tag`
+which acts just like the rails tag helper. This will include our
+`application.rb` file, and all of its dependencies. Each file will be included
+in a seperate `<script>..</script>` tag to make navigating the code in a
+web browser easier.
+
+### Router
+
+`TodoAppView` use router provided by [Vienna](https://github.com/opal/vienna)
+
+### Model
+
+Use model layer provided by [Vienna](https://github.com/opal/vienna) which provide basic support of local storage and update notification.

data/example/todos/Rakefile

@@ -0,0 +1,8 @@
+require 'bundler'
+Bundler.require
+
+require 'opal/rspec/rake_task'
+Opal::RSpec::RakeTask.new(:default) do |s|
+  s.append_path 'app'
+  s.append_path 'vendor'
+end

data/example/todos/app/application.rb

@@ -0,0 +1,22 @@
+require 'opal'
+require 'jquery'
+require 'opal-jquery'
+require 'opal-haml'
+require 'vienna'
+require "react"
+
+require 'models/todo'
+
+require "components/app.react"
+
+Document.ready? do
+  element = React.create_element(TodoAppView, filter: "all")
+  component = React.render(element, Element.find('#todoapp').get(0))
+
+  Vienna::Router.new.tap do |router|
+    router.route('/:filter') do |params|
+      component.set_props(filter: params[:filter].empty? ? "all" : params[:filter])
+    end
+  end.update
+
+end

data/example/todos/app/components/app.react.rb

@@ -0,0 +1,61 @@
+require "components/footer.react"
+require "components/todo_item.react"
+require "components/todo_list.react"
+
+class TodoAppView
+  include React::Component
+
+  KEY_ENTER = 13
+
+  params do
+    requires :filter, values: ["all", "active", "completed"]
+  end
+
+  define_state(:todos) { [] }
+
+  before_mount do
+    Todo.on(:create)  { Todo.adapter.sync_models(Todo); reload_current_filter }
+    Todo.on(:update)  { Todo.adapter.sync_models(Todo); reload_current_filter }
+    Todo.on(:destroy) { Todo.adapter.sync_models(Todo); reload_current_filter }
+  end
+
+  before_receive_props do |next_props|
+    apply_filter next_props[:filter]
+  end
+
+  def reload_current_filter
+    apply_filter(params[:filter])
+  end
+
+  def apply_filter(filter)
+    Todo.adapter.find_all(Todo) do |models|
+      case filter
+      when "all"
+        self.todos = models
+      when "active"
+        self.todos = models.reject(&:completed)
+      when "completed"
+        self.todos = models.select(&:completed)
+      end
+    end
+  end
+
+  def handle_keydown(event)
+    if event.key_code == KEY_ENTER
+      value = event.target.value.strip
+      Todo.create title: value, completed: false
+      event.target.value = ""
+    end
+  end
+
+  def render
+    div do
+      header(id: "header") do
+        h1 { "Todos" }
+        input(id: "new-todo", placeholder: "What needs to be done?").on(:key_down) { |e| handle_keydown(e) }
+      end
+      present TodoList, todos: self.todos
+      present Footer, selected_filter: params[:filter]
+    end
+  end
+end

data/example/todos/app/components/footer.react.rb

@@ -0,0 +1,31 @@
+class Footer
+  include React::Component
+
+  def clear_completed
+    Todo.completed.each { |t| t.destroy }
+  end
+
+  def render
+    footer(id: "footer") do
+      span(id: "todo-count") do
+        strong { Todo.active.size }
+        span { Todo.active.size == 1 ? ' item left' : ' items left' }
+      end
+
+      ul(id: "filters") do
+        filters = [{href: "#/", filter: "all"},
+                   {href: "#/active", filter: "active"},
+                   {href: "#/completed", filter: "completed"}]
+        filters.map do |item|
+          li { a(href: item[:href], class_name: {selected: params[:selected_filter] == item[:filter]}) { item[:filter].capitalize } }
+        end
+      end
+
+      completed = Todo.completed.size
+
+      if completed > 0
+        button(id: "clear-completed") { "Clear completed (#{completed})" }.on(:click) { clear_completed }
+      end
+    end
+  end
+end

data/example/todos/app/components/todo_item.react.rb

@@ -0,0 +1,46 @@
+class TodoItem
+  include React::Component
+  KEY_ENTER = 13
+
+  define_state(:editing) { false }
+  define_state(:edit_text)
+
+  before_mount :set_up
+
+  def set_up
+    self.edit_text = params[:todo].title
+  end
+
+  def finish_editing
+    self.editing = false
+    new_value = self.edit_text.strip
+    if new_value.empty?
+      params[:todo].destroy
+    else
+      params[:todo].update(title: new_value)
+    end
+  end
+
+  def render
+    li(class_name: {editing: self.editing}) do
+      div(class_name: 'view') do
+        input(class_name: "toggle", type: "checkbox", checked: params[:todo].completed).on(:click) do
+          todo = params[:todo]
+          todo.update(:completed => !todo.completed)
+        end
+        label { self.edit_text }.on(:double_click) do
+          # set on state will trigger re-render, so we manipulate the DOM after render done
+          self.set_state(editing: true) do
+            self.refs[:input].dom_node.focus
+          end
+          self.edit_text = params[:todo].title
+        end
+        button(class_name: "destroy").on(:click) { params[:todo].destroy }
+      end
+      input(class_name: "edit", value: self.edit_text, ref: :input)
+      .on(:blur) { finish_editing }
+      .on(:change) {|e| self.edit_text = e.target.value }
+      .on(:key_down) { |e| finish_editing if (e.key_code == KEY_ENTER) }
+    end
+  end
+end

data/example/todos/app/components/todo_list.react.rb

@@ -0,0 +1,25 @@
+class TodoList
+  include React::Component
+  
+  def toggle_all
+    distinct_status = Todo.all.map {|t| t.completed }.uniq
+    
+    if distinct_status.count == 1
+      Todo.all.each {|t| t.update(:completed => !distinct_status[0]) }
+    else # toggle all as completed
+      Todo.all.each {|t| t.update(:completed => true) }
+    end
+  end
+  
+  def render
+    section(id: "main") do
+      input(id: "toggle-all", type: "checkbox").on(:click) { toggle_all }
+      label(htmlFor: "toggle-all") { "Mark all as complete" }
+      ul(id: "todo-list") do
+        params[:todos].map do |todo|
+          present TodoItem, todo: todo , key: todo.id
+        end
+      end
+    end
+  end
+end

data/example/todos/app/models/todo.rb

@@ -0,0 +1,19 @@
+require 'vienna/adapters/local'
+
+class Todo < Vienna::Model
+  adapter Vienna::LocalAdapter
+
+  attributes :title, :completed
+
+  alias completed? completed
+
+  # All active (not completed) todos
+  def self.active
+    all.reject(&:completed)
+  end
+
+  # All completed todos
+  def self.completed
+    all.select(&:completed)
+  end
+end

data/example/todos/config.ru

@@ -0,0 +1,14 @@
+require 'bundler'
+Bundler.require
+
+require "react/source"
+
+run Opal::Server.new { |s|
+  s.append_path 'app'
+  s.append_path 'vendor'
+  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+
+  s.debug = true
+  s.main = 'application'
+  s.index_path = 'index.html.haml'
+}

data/example/todos/index.html.haml

@@ -0,0 +1,16 @@
+!!!
+%html(lang="en")
+  %head
+    %meta(charset="utf-8")
+    %meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
+    %link(rel="stylesheet" href="/vendor/base.css")
+    = javascript_include_tag 'react-with-addons.min.js'
+    = javascript_include_tag 'application'
+
+  %body
+    %section#todoapp
+    #info
+      %p Double-click to edit a todo
+      %p
+        Part of
+        %a(href="http://todomvc.com") TodoMVC