react.rb 0.0.1

data/lib/react/ext/hash.rb

@@ -0,0 +1,9 @@
+class Hash
+  def shallow_to_n
+    hash = `{}`
+    self.map do |key, value|
+       `hash[#{key}] = #{value}`
+    end
+    hash
+  end
+end

data/lib/react/ext/string.rb

@@ -0,0 +1,8 @@
+class String
+  def event_camelize
+    `#{self}.replace(/(^|_)([^_]+)/g, function(match, pre, word, index) {
+      var capitalize = true;
+      return capitalize ? word.substr(0,1).toUpperCase()+word.substr(1) : word;
+    })`
+  end
+end

data/lib/react/top_level.rb

@@ -0,0 +1,50 @@
+require "native"
+require 'active_support'
+
+module React
+  HTML_TAGS = %w(a abbr address area article aside audio b base bdi bdo big blockquote body br
+                button canvas caption cite code col colgroup data datalist dd del details dfn
+                dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
+                h6 head header hr html i iframe img input ins kbd keygen label legend li link
+                main map mark menu menuitem meta meter nav noscript object ol optgroup option
+                output p param picture pre progress q rp rt ruby s samp script section select
+                small source span strong style sub summary sup table tbody td textarea tfoot th
+                thead time title tr track u ul var video wbr)
+  ATTRIBUTES = %w(accept acceptCharset accessKey action allowFullScreen allowTransparency alt
+                async autoComplete autoPlay cellPadding cellSpacing charSet checked classID
+                className cols colSpan content contentEditable contextMenu controls coords
+                crossOrigin data dateTime defer dir disabled download draggable encType form
+                formAction formEncType formMethod formNoValidate formTarget frameBorder height
+                hidden href hrefLang htmlFor httpEquiv icon id label lang list loop manifest
+                marginHeight marginWidth max maxLength media mediaGroup method min multiple
+                muted name noValidate open pattern placeholder poster preload radioGroup
+                readOnly rel required role rows rowSpan sandbox scope scrolling seamless
+                selected shape size sizes span spellCheck src srcDoc srcSet start step style
+                tabIndex target title type useMap value width wmode dangerouslySetInnerHTML)
+
+  def self.create_element(type, properties = {}, &block)
+    React::API.create_element(type, properties, &block)
+  end
+
+  def self.render(element, container)
+    component = Native(`React.render(#{element.to_n}, container, function(){#{yield if block_given?}})`)
+    component.class.include(React::Component::API)
+    component
+  end
+
+  def self.is_valid_element(element)
+    element.kind_of?(React::Element) && `React.isValidElement(#{element.to_n})`
+  end
+
+  def self.render_to_string(element)
+    `React.renderToString(#{element.to_n})`
+  end
+
+  def self.render_to_static_markup(element)
+    `React.renderToStaticMarkup(#{element.to_n})`
+  end
+
+  def self.unmount_component_at_node(node)
+    `React.unmountComponentAtNode(node)`
+  end
+end

data/lib/react/validator.rb

@@ -0,0 +1,65 @@
+module React
+  class Validator
+    def self.build(&block)
+      validator = self.new
+      validator.instance_eval(&block)
+      validator
+    end
+
+    def initialize
+      @rules = {}
+    end
+
+    def requires(prop_name, options = {})
+      rule = options
+      options[:required] = true
+      @rules[prop_name] = options
+    end
+
+    def optional(prop_name, options = {})
+      rule = options
+      options[:required] = false
+      @rules[prop_name] = options
+    end
+
+    def validate(props)
+      errors = []
+      props.keys.each do |prop_name|
+        errors <<  "Provided prop `#{prop_name}` not specified in spec"  if @rules[prop_name] == nil
+      end
+
+      props = props.select {|key| @rules.keys.include?(key) }
+
+      # requires or not
+      (@rules.keys - props.keys).each do |prop_name|
+        errors << "Required prop `#{prop_name}` was not specified" if @rules[prop_name][:required]
+      end
+
+      # type
+      props.each do |prop_name, value|
+        if klass = @rules[prop_name][:type]
+          if klass.is_a?(Array)
+            errors <<  "Provided prop `#{prop_name}` was not an Array of the specified type `#{klass[0]}`" unless value.all?{ |ele| ele.is_a?(klass[0]) }
+          else
+            errors <<  "Provided prop `#{prop_name}` was not the specified type `#{klass}`" unless value.is_a?(klass)
+          end
+        end
+      end
+
+      # values
+      props.each do |prop_name, value|
+        if values = @rules[prop_name][:values]
+          errors << "Value `#{value}` for prop `#{prop_name}` is not an allowed value" unless values.include?(value)
+        end
+      end
+
+      errors
+    end
+
+    def default_props
+      @rules
+      .select {|key, value| value.keys.include?("default") }
+      .inject({}) {|memo, (k,v)| memo[k] = v[:default]; memo}
+    end
+  end
+end

data/lib/react/version.rb

@@ -0,0 +1,3 @@
+module React
+  VERSION = "0.0.1"
+end

data/react.rb.gemspec

@@ -0,0 +1,24 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/react/version', __FILE__)
+
+Gem::Specification.new do |s|
+  s.name         = 'react.rb'
+  s.version      = React::VERSION
+  s.author       = 'David Chang'
+  s.email        = 'zeta11235813@gmail.com'
+  s.homepage     = 'https://github.com/zetachang/react.rb'
+  s.summary      = 'Opal Ruby wrapper of React.js library.'
+  s.description  = "Write reactive UI component with Ruby's elegancy and compiled to run in Javascript."
+
+  s.files          = `git ls-files`.split("\n")
+  s.executables    = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
+  s.test_files     = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.require_paths  = ['lib', 'vendor']
+
+  s.add_runtime_dependency 'opal', '~> 0.6.0'
+  s.add_runtime_dependency 'opal-activesupport'
+  s.add_development_dependency 'react-source', '~> 0.12'
+  s.add_development_dependency 'opal-rspec', '~> 0.3.0.beta3'
+  s.add_development_dependency 'sinatra'
+  s.add_development_dependency 'opal-jquery'
+end

data/spec/callbacks_spec.rb

@@ -0,0 +1,107 @@
+require "spec_helper"
+require "react/callbacks"
+
+describe React::Callbacks do
+  it "should be able to define callback" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Callbacks
+      define_callback :before_dinner
+
+      before_dinner :wash_hand
+
+      def wash_hand
+
+      end
+    end
+
+    expect_any_instance_of(Foo).to receive(:wash_hand)
+    Foo.new.run_callback(:before_dinner)
+  end
+
+  it "should be able to define multiple callbacks" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Callbacks
+      define_callback :before_dinner
+
+      before_dinner :wash_hand, :turn_of_laptop
+
+      def wash_hand;end
+
+      def turn_of_laptop;end
+    end
+
+    expect_any_instance_of(Foo).to receive(:wash_hand)
+    expect_any_instance_of(Foo).to receive(:turn_of_laptop)
+    Foo.new.run_callback(:before_dinner)
+  end
+
+  it "should be able to define block callback" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Callbacks
+      attr_accessor :a
+      attr_accessor :b
+
+      define_callback :before_dinner
+
+      before_dinner do
+        self.a = 10
+      end
+      before_dinner do
+        self.b = 20
+      end
+    end
+
+    foo = Foo.new
+    foo.run_callback(:before_dinner)
+    expect(foo.a).to eq(10)
+    expect(foo.b).to eq(20)
+  end
+
+  it "should be able to define multiple callback group" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Callbacks
+      define_callback :before_dinner
+      define_callback :after_dinner
+      attr_accessor :a
+
+      before_dinner do
+        self.a = 10
+      end
+    end
+
+    foo = Foo.new
+    foo.run_callback(:before_dinner)
+    foo.run_callback(:after_dinner)
+
+    expect(foo.a).to eq(10)
+  end
+
+  it "should be able to receive args as callback" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Callbacks
+      define_callback :before_dinner
+      define_callback :after_dinner
+
+      attr_accessor :lorem
+
+      before_dinner do |a, b|
+        self.lorem  = "#{a}-#{b}"
+      end
+
+      after_dinner :eat_ice_cream
+      def eat_ice_cream(a,b,c);  end
+    end
+
+    expect_any_instance_of(Foo).to receive(:eat_ice_cream).with(4,5,6)
+
+    foo = Foo.new
+    foo.run_callback(:before_dinner, 1, 2)
+    foo.run_callback(:after_dinner, 4, 5, 6)
+    expect(foo.lorem).to eq('1-2')
+  end
+end

data/spec/component_spec.rb

@@ -0,0 +1,556 @@
+require "spec_helper"
+
+describe React::Component do
+  after(:each) do
+    React::API.clear_component_class_cache
+  end
+
+  it "should define component spec methods" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        React.create_element("div")
+      end
+    end
+
+    # Class Methods
+    expect(Foo).to respond_to("initial_state")
+    expect(Foo).to respond_to("default_props")
+    expect(Foo).to respond_to("prop_types")
+
+    # Instance method
+    expect(Foo.new).to respond_to("component_will_mount")
+    expect(Foo.new).to respond_to("component_did_mount")
+    expect(Foo.new).to respond_to("component_will_receive_props")
+    expect(Foo.new).to respond_to("should_component_update?")
+    expect(Foo.new).to respond_to("component_will_update")
+    expect(Foo.new).to respond_to("component_did_update")
+    expect(Foo.new).to respond_to("component_will_unmount")
+  end
+
+  describe "Life Cycle" do
+    before(:each) do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          React.create_element("div") { "lorem" }
+        end
+      end
+    end
+
+    it "should invoke `before_mount` registered methods when `componentWillMount()`" do
+      Foo.class_eval do
+        before_mount :bar, :bar2
+        def bar; end
+        def bar2; end
+      end
+
+      expect_any_instance_of(Foo).to receive(:bar)
+      expect_any_instance_of(Foo).to receive(:bar2)
+
+      renderToDocument(Foo)
+    end
+
+    it "should invoke `after_mount` registered methods when `componentDidMount()`" do
+      Foo.class_eval do
+        after_mount :bar3, :bar4
+        def bar3; end
+        def bar4; end
+      end
+
+      expect_any_instance_of(Foo).to receive(:bar3)
+      expect_any_instance_of(Foo).to receive(:bar4)
+
+      renderToDocument(Foo)
+    end
+
+    it "should allow multiple class declared life cycle hooker" do
+      stub_const 'FooBar', Class.new
+      Foo.class_eval do
+        before_mount :bar
+        def bar; end
+      end
+
+      FooBar.class_eval do
+        include React::Component
+        after_mount :bar2
+        def bar2; end
+        def render
+          React.create_element("div") { "lorem" }
+        end
+      end
+
+      expect_any_instance_of(Foo).to receive(:bar)
+
+      renderToDocument(Foo)
+    end
+
+    it "should allow block for life cycle callback" do
+      Foo.class_eval do
+        define_state(:foo)
+
+        before_mount do
+          self.foo = "bar"
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be("bar")
+    end
+  end
+
+  describe "State setter & getter" do
+    before(:each) do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          React.create_element("div") { "lorem" }
+        end
+      end
+    end
+
+    it "should define setter using `define_state`" do
+      Foo.class_eval do
+        define_state :foo
+        before_mount :set_up
+        def set_up
+          self.foo = "bar"
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be("bar")
+    end
+
+    it "should define init state by passing a block to `define_state`" do
+      Foo.class_eval do
+        define_state(:foo) { 10 }
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(10)
+    end
+
+    it "should define getter using `define_state`" do
+      Foo.class_eval do
+        define_state(:foo) { 10 }
+        before_mount :bump
+        def bump
+          self.foo = self.foo + 20
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(30)
+    end
+
+    it "should define multiple state accessor by passing symols array to `define_state`" do
+      Foo.class_eval do
+        define_state :foo, :foo2
+        before_mount :set_up
+        def set_up
+          self.foo = 10
+          self.foo2 = 20
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(10)
+      expect(element.state.foo2).to be(20)
+    end
+
+    it "should invoke `define_state` multiple times to define states" do
+      Foo.class_eval do
+        define_state(:foo) { 30 }
+        define_state(:foo2) { 40 }
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(30)
+      expect(element.state.foo2).to be(40)
+    end
+
+    it "should raise error if multiple states and block given at the same time" do
+      expect  {
+        Foo.class_eval do
+          define_state(:foo, :foo2) { 30 }
+        end
+      }.to raise_error
+    end
+
+    it "should get state in render method" do
+      Foo.class_eval do
+        define_state(:foo) { 10 }
+        def render
+          React.create_element("div") { self.foo }
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.getDOMNode.textContent).to eq("10")
+    end
+
+    it "should support original `setState` as `set_state` method" do
+      Foo.class_eval do
+        before_mount do
+          self.set_state(foo: "bar")
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be("bar")
+    end
+
+    it "should support original `replaceState` as `set_state!` method" do
+      Foo.class_eval do
+        before_mount do
+          self.set_state(foo: "bar")
+          self.set_state!(bar: "lorem")
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be_nil
+      expect(element.state.bar).to eq("lorem")
+    end
+
+    it "should support originl `state` method" do
+      Foo.class_eval do
+        before_mount do
+          self.set_state(foo: "bar")
+        end
+
+        def render
+          div { self.state[:foo] }
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq("<div>bar</div>")
+    end
+
+    it "should transform state getter to Ruby object" do
+      Foo.class_eval do
+        define_state :foo
+
+        before_mount do
+          self.foo = [{a: 10}]
+        end
+
+        def render
+          div { self.foo[0][:a] }
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq("<div>10</div>")
+    end
+  end
+
+  describe "Props" do
+    describe "this.props could be accessed through `params` method" do
+      before do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+        end
+      end
+
+      it "should read from parent passed properties through `params`" do
+        Foo.class_eval do
+          def render
+            React.create_element("div") { params[:prop] }
+          end
+        end
+
+        element = renderToDocument(Foo, prop: "foobar")
+        expect(element.getDOMNode.textContent).to eq("foobar")
+      end
+
+      it "should access nested params as orignal Ruby object" do
+        Foo.class_eval do
+          def render
+            React.create_element("div") { params[:prop][0][:foo] }
+          end
+        end
+
+        element = renderToDocument(Foo, prop: [{foo: 10}])
+        expect(element.getDOMNode.textContent).to eq("10")
+      end
+    end
+
+    describe "Props Updating" do
+      before do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+        end
+      end
+
+      it "should support original `setProps` as method `set_props`" do
+        Foo.class_eval do
+          def render
+            React.create_element("div") { params[:foo] }
+          end
+        end
+
+        element = renderToDocument(Foo, {foo: 10})
+        element.set_props(foo: 20)
+        expect(element.dom_node.innerHTML).to eq('20')
+      end
+
+      it "should support original `replaceProps` as method `set_props!`" do
+        Foo.class_eval do
+          def render
+            React.create_element("div") { params[:foo] ? "exist" : "null" }
+          end
+        end
+
+        element = renderToDocument(Foo, {foo: 10})
+        element.set_props!(bar: 20)
+        expect(element.dom_node.innerHTML).to eq('null')
+      end
+    end
+
+    describe "Prop validation" do
+      before do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+        end
+      end
+
+      it "should specify validation rules using `params` class method" do
+        Foo.class_eval do
+          params do
+            requires :foo, type: String
+            optional :bar
+          end
+        end
+
+        expect(Foo.prop_types).to have_key(:_componentValidator)
+      end
+
+      it "should log error in warning if validation failed" do
+        stub_const 'Lorem', Class.new
+        Foo.class_eval do
+          params do
+            requires :foo
+            requires :lorem, type: Lorem
+            optional :bar, type: String
+          end
+
+          def render; div; end
+        end
+
+        %x{
+          var log = [];
+          var org_console = window.console;
+          window.console = {warn: function(str){log.push(str)}}
+        }
+        renderToDocument(Foo, bar: 10, lorem: Lorem.new)
+        `window.console = org_console;`
+        expect(`log`).to eq(["Warning: In component `Foo`\nRequired prop `foo` was not specified\nProvided prop `bar` was not the specified type `String`"])
+      end
+
+      it "should not log anything if validation pass" do
+        stub_const 'Lorem', Class.new
+        Foo.class_eval do
+          params do
+            requires :foo
+            requires :lorem, type: Lorem
+            optional :bar, type: String
+          end
+
+          def render; div; end
+        end
+
+        %x{
+          var log = [];
+          var org_console = window.console;
+          window.console = {warn: function(str){log.push(str)}}
+        }
+        renderToDocument(Foo, foo: 10, bar: "10", lorem: Lorem.new)
+        `window.console = org_console;`
+        expect(`log`).to eq([])
+      end
+    end
+
+    describe "Default props" do
+      it "should set default props using validation helper" do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+          params do
+            optional :foo, default: "foo"
+            optional :bar, default: "bar"
+          end
+
+          def render
+            div { params[:foo] + "-" + params[:bar]}
+          end
+        end
+
+        expect(React.render_to_static_markup(React.create_element(Foo, foo: "lorem"))).to eq("<div>lorem-bar</div>")
+        expect(React.render_to_static_markup(React.create_element(Foo))).to eq("<div>foo-bar</div>")
+      end
+    end
+  end
+
+  describe "Event handling" do
+    before do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+      end
+    end
+
+    it "should work in render method" do
+      Foo.class_eval do
+        define_state(:clicked) { false }
+
+        def render
+          React.create_element("div").on(:click) do
+            self.clicked = true
+          end
+        end
+      end
+
+      element = React.create_element(Foo)
+      instance = renderElementToDocument(element)
+      simulateEvent(:click, instance)
+      expect(instance.state.clicked).to eq(true)
+    end
+
+    it "should invoke handler on `this.props` using emit" do
+      Foo.class_eval do
+        after_mount :setup
+
+        def setup
+          self.emit(:foo_submit, "bar")
+        end
+
+        def render
+          React.create_element("div")
+        end
+      end
+
+      expect { |b|
+        element = React.create_element(Foo).on(:foo_submit, &b)
+        renderElementToDocument(element)
+      }.to yield_with_args("bar")
+    end
+
+    it "should invoke handler with multiple params using emit" do
+      Foo.class_eval do
+        after_mount :setup
+
+        def setup
+          self.emit(:foo_invoked, [1,2,3], "bar")
+        end
+
+        def render
+          React.create_element("div")
+        end
+      end
+
+      expect { |b|
+        element = React.create_element(Foo).on(:foo_invoked, &b)
+        renderElementToDocument(element)
+      }.to yield_with_args([1,2,3], "bar")
+    end
+  end
+
+  describe "Refs" do
+    before do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+      end
+    end
+
+    it "should correctly assign refs" do
+      Foo.class_eval do
+        def render
+          React.create_element("input", type: :text, ref: :field)
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.refs.field).not_to be_nil
+    end
+
+    it "should access refs through `refs` method" do
+      Foo.class_eval do
+        def render
+          React.create_element("input", type: :text, ref: :field).on(:click) do
+            refs[:field].value = "some_stuff"
+          end
+        end
+      end
+
+      element = renderToDocument(Foo)
+      simulateEvent(:click, element)
+
+      expect(element.refs.field.value).to eq("some_stuff")
+    end
+  end
+
+  describe "Render" do
+    it "should support element building helpers" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+
+        def render
+          div do
+            span { params[:foo] }
+          end
+        end
+      end
+
+      stub_const 'Bar', Class.new
+      Bar.class_eval do
+        include React::Component
+        def render
+          div do
+            present Foo, foo: "astring"
+          end
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Bar))).to eq("<div><div><span>astring</span></div></div>")
+    end
+
+    it "should build single node in top-level render without providing a block" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+
+        def render
+          div
+        end
+      end
+
+      element = React.create_element(Foo)
+      expect(React.render_to_static_markup(element)).to eq("<div></div>")
+    end
+  end
+
+  describe "isMounted()" do
+    it "should return true if after mounted" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+
+        def render
+          React.create_element("div")
+        end
+      end
+
+      component = renderToDocument(Foo)
+      expect(component.mounted?).to eq(true)
+    end
+  end
+end