Opal 0.8 - WIP noise reducing syntax changes

Gemfile

@@ -1,2 +1,3 @@
 source 'https://rubygems.org'
-gemspec
+gemspec
+gem 'opal', :git => "https://github.com/catprintlabs/opal.git"

Gemfile.lock

@@ -1,46 +1,48 @@
+GIT
+  remote: https://github.com/catprintlabs/opal.git
+  revision: 3682db6f2b23a584787a68d5338a7ee9cb35565a
+  specs:
+    opal (0.7.1)
+      hike (~> 1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (>= 2.2.3, < 4.0.0)
+      tilt (~> 1.4)
+
 PATH
   remote: .
   specs:
     react.rb (0.0.2)
-      opal (~> 0.7.0)
+      opal
       opal-activesupport
 
 GEM
   remote: https://rubygems.org/
   specs:
     hike (1.2.3)
-    multi_json (1.10.1)
-    opal (0.7.1)
-      hike (~> 1.2)
-      sourcemap (~> 0.1.0)
-      sprockets (>= 2.2.3, < 4.0.0)
-      tilt (~> 1.4)
     opal-activesupport (0.1.0)
       opal (>= 0.5.0, < 1.0.0)
     opal-jquery (0.3.0)
       opal (~> 0.7.0)
-    opal-rspec (0.4.1)
+    opal-rspec (0.4.2)
       opal (~> 0.7.0)
     rack (1.6.0)
     rack-protection (1.5.3)
       rack
-    react-source (0.12.2)
-    sinatra (1.4.5)
+    react-source (0.13.2)
+    sinatra (1.4.6)
       rack (~> 1.4)
       rack-protection (~> 1.4)
-      tilt (~> 1.3, >= 1.3.4)
+      tilt (>= 1.3, < 3)
     sourcemap (0.1.1)
-    sprockets (2.12.3)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
+    sprockets (3.0.3)
       rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
     tilt (1.4.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  opal!
   opal-jquery
   opal-rspec
   react-source (~> 0.12)

README.md

@@ -9,89 +9,98 @@ It lets you write reactive UI components, with Ruby's elegance and compiled to r
 
 ## Installation
 
+Currently this branch (0.8 in catprint labs) is being used with the following configuration.  
+It is suggested to begin with this
+set of gems which is known to work and then add / remove them as needed.  Let us know if you discover anything.
+
+Currently we are using rails 3.x
+
 ```ruby
 # Gemfile
-gem "react.rb"
+# gem 'react-rails', git: "https://github.com/catprintlabs/react-rails.git" # include if you want integration with rails
+gem 'opal'
+
+# gem 'opal', git: "https://github.com/catprintlabs/opal.git"  # use this if you are stuck on rails 3.x
+# gem 'opal-jquery', git: "https://github.com/catprintlabs/opal-jquery.git" # same as above
+
+# include if you want integration with rails
+# gem 'opal-rails' 
+
+# while not absolutely necessary you will probably want this at least for timers and such
+# gem 'opal-browser'
+
+gem 'opal-react', git: "https://github.com/catprintlabs/react.rb.git", :branch => 'opal-0.8'
+
+# access active record models from opal!
+# gem 'reactive_record', git: "https://github.com/catprintlabs/reactive-record.git"  
+
+# include if you want to use bootstrap
+# gem 'react-bootstrap-rails' 
 ```
 
 and in your Opal application,
 
 ```ruby
-require "opal"
+require "opal-react"
 require "react"
 
 React.render(React.create_element('h1'){ "Hello World!" }, `document.body`)
 ```
 
-For integration with server (Sinatra, etc), see setup of [TodoMVC](example/todos) or the [official docs](http://opalrb.org/docs/) of Opal.
-
-## Usage
-
-### A Simple Component
+For a complete example covering most key features, as well as integration with a server (Sinatra, etc), see setup of [Examples](example/tutorial).  For additional information on integrating Opal with a server see the [official docs](http://opalrb.org/docs/) of Opal.
 
-A ruby class which define method `render` is a valid component.
+## React Overview
 
-```ruby
-class HelloMessage
-  def render
-    React.create_element("div") { "Hello World!" }
-  end
-end
+### Basics
 
-puts React.render_to_static_markup(React.create_element(HelloMessage))
+The biggest problem with react is that its almost too simple.
 
-# => '<div>Hello World!</div>'
-```
+In react you define components.  Components are simply classes that have a "render" method.   The render method "draws" a chunk of
+HTML.  
 
-### More complicated one
-
-To hook into native ReactComponent life cycle, the native `this` will be passed to the class's initializer. And all corresponding life cycle methods (`componentDidMount`, etc) will be invoked on the instance using the snake-case method name.
+Here is a very simple component:
 
 ```ruby
-class HelloMessage
-  def initialize(native)
-    @native = Native(native)
-  end
 
-  def component_will_mount
-    puts "will mount!"
-  end
+require 'opal'
+require 'opal-react'
 
+class Hello
   def render
-    React.create_element("div") { "Hello #{@native[:props][:name]}!" }
+    "hello world"
   end
 end
-
-puts React.render_to_static_markup(React.create_element(HelloMessage, name: 'John'))
-
-# => will_mount!
-# => '<div>Hello John!</div>'
 ```
 
-### React::Component
-
-Hey, we are using Ruby, simply include `React::Component` to save your typing and have some handy methods defined.
+Include the `React::Component` mixin in a class to turn it into a react component
 
 ```ruby
+require 'opal'
+require 'opal-react'
+
 class HelloMessage
-  include React::Component
+
+  include React::Component                    # will create a new component named HelloMessage
+
   MSG = {great: 'Cool!', bad: 'Cheer up!'}
 
-  define_state(:foo) { "Default greeting" }
+  optional_param :mood
+  required_param :name
+  define_state   :foo, "Default greeting"
 
-  before_mount do
-    self.foo = "#{self.foo}: #{MSG[params[:mood]]}"
+  before_mount do                             # you can define life cycle callbacks inline
+    foo! "#{name}: #{MSG[mood]}" if mood      # change the state of foo using foo!, read the state using foo
   end
 
-  after_mount :log
+  after_mount :log                            # you can also define life cycle callbacks by reference to a method
 
   def log
     puts "mounted!"
   end
-
-  def render
-    div do
-      span { self.foo + " #{params[:name]}!" }
+  
+  def render                                  # render method MUST return just one component  
+    div do                                    # basic dsl syntax component_name(options) { ...children... }                                    
+      span { "#{foo} #{name}!" }              # all html5 components are defined with lower case text
     end
   end
 end
@@ -100,17 +109,16 @@ class App
   include React::Component
 
   def render
-    present HelloMessage, name: 'John', mood: 'great'
+    HelloMessage name: 'John', mood: :great   # new components are accessed via the class name
   end
 end
 
-puts React.render_to_static_markup(React.create_element(App))
-
-# => '<div><span>Default greeting: Cool! John!</span></div>'
+# later we will talk about nicer ways to do this:  For now wait till doc is loaded
+# then tell React to create an "App" and render it into the document body.
 
-React.render(React.create_element(App), `document.body`)
+`window.onload = #{lambda {React.render(React.create_element(App), `document.body`)}}`
 
-# mounted!
+# -> console says: mounted!
 ```
 
 * Callback of life cycle could be created through helpers `before_mount`, `after_mount`, etc
@@ -204,6 +212,47 @@ end
 # => ... for 5 times then stop ticking after 5 seconds
 ```
 
+
+### A Simple Component
+
+A ruby class which define method `render` is a valid component.
+
+```ruby
+class HelloMessage
+  def render
+    React.create_element("div") { "Hello World!" }
+  end
+end
+
+puts React.render_to_static_markup(React.create_element(HelloMessage))
+
+# => '<div>Hello World!</div>'
+```
+
+### More complicated one
+
+To hook into native ReactComponent life cycle, the native `this` will be passed to the class's initializer. And all corresponding life cycle methods (`componentDidMount`, etc) will be invoked on the instance using the snake-case method name.
+
+```ruby
+class HelloMessage
+  def initialize(native)
+    @native = Native(native)
+  end
+
+  def component_will_mount
+    puts "will mount!"
+  end
+
+  def render
+    React.create_element("div") { "Hello #{@native[:props][:name]}!" }
+  end
+end
+
+puts React.render_to_static_markup(React.create_element(HelloMessage, name: 'John'))
+
+# => will_mount!
+# => '<div>Hello John!</div>'
+```
 ## Example
 
 * React Tutorial: see [example/react-tutorial](example/react-tutorial), the original CommentBox example.

example/examples/Gemfile

@@ -0,0 +1,7 @@
+source 'http://rubygems.org'
+
+gem 'opal'
+gem 'opal-react', :path => '../..'
+gem 'sinatra'
+#gem 'opal-jquery'
+gem 'react-source'

example/examples/Gemfile.lock

@@ -0,0 +1,45 @@
+PATH
+  remote: ../..
+  specs:
+    opal-react (0.1.1)
+      opal
+      opal-activesupport
+
+GEM
+  remote: http://rubygems.org/
+  specs:
+    hike (1.2.3)
+    opal (0.8.0)
+      hike (~> 1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (~> 3.1)
+      tilt (>= 1.4)
+    opal-activesupport (0.1.0)
+      opal (>= 0.5.0, < 1.0.0)
+    opal-jquery (0.4.0)
+      opal (>= 0.7.0, < 0.9.0)
+    rack (1.6.4)
+    rack-protection (1.5.3)
+      rack
+    react-source (0.13.3)
+    sinatra (1.4.6)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (>= 1.3, < 3)
+    sourcemap (0.1.1)
+    sprockets (3.2.0)
+      rack (~> 1.0)
+    tilt (2.0.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  opal
+  opal-jquery
+  opal-react!
+  react-source
+  sinatra
+
+BUNDLED WITH
+   1.10.2

example/examples/config.ru

@@ -0,0 +1,44 @@
+# config.ru
+require 'bundler'
+Bundler.require
+
+require "react/source"
+
+Opal::Processor.source_map_enabled = true
+
+opal = Opal::Server.new {|s|
+  s.append_path './'
+  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+  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 '/example/:example' do
+  example = params[:example]
+  <<-HTML
+    <!doctype html>
+    <html>
+      <head>
+        <title>Example: #{example}.rb</title>
+        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
+        <script src="/assets/react-with-addons.min.js"></script>
+        <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