react.rb 0.0.1

data/lib/react/api.rb

@@ -0,0 +1,95 @@
+module React
+  class API
+    @@component_classes = {}
+
+    def self.create_element(type, properties = {}, &block)
+      params = []
+
+      # Component Spec or Nomral DOM
+      if type.kind_of?(Class)
+        raise "Provided class should define `render` method"  if !(type.method_defined? :render)
+        @@component_classes[type.to_s] ||= %x{
+          React.createClass({
+            propTypes: #{type.respond_to?(:prop_types) ? type.prop_types.to_n : `{}`},
+            getDefaultProps: function(){
+              return #{type.respond_to?(:default_props) ? type.default_props.to_n : `{}`};
+            },
+            getInitialState: function(){
+              return #{type.respond_to?(:initial_state) ? type.initial_state.to_n : `{}`};
+            },
+            componentWillMount: function() {
+              instance = #{type.new(`this`)};
+              return #{`instance`.component_will_mount if type.method_defined? :component_will_mount};
+            },
+            componentDidMount: function() {
+              instance = #{type.new(`this`)};
+              return #{`instance`.component_did_mount if type.method_defined? :component_did_mount};
+            },
+            componentWillReceiveProps: function(next_props) {
+              instance = #{type.new(`this`)};
+              return #{`instance`.component_will_receive_props(`next_props`) if type.method_defined? :component_will_receive_props};
+            },
+            shouldComponentUpdate: function(next_props, next_state) {
+              instance = #{type.new(`this`)};
+              return #{`instance`.should_component_update?(`next_props`, `next_state`) if type.method_defined? :should_component_update?};
+            },
+            componentWillUpdate: function(next_props, next_state) {
+              instance = #{type.new(`this`)};
+              return #{`instance`.component_will_update(`next_props`, `next_state`) if type.method_defined? :component_will_update};
+            },
+            componentDidUpdate: function(prev_props, prev_state) {
+              instance = #{type.new(`this`)};
+              return #{`instance`.component_did_update(`prev_props`, `prev_state`) if type.method_defined? :component_did_update};
+            },
+            componentWillUnmount: function() {
+              instance = #{type.new(`this`)};
+              return #{`instance`.component_will_unmount if type.method_defined? :component_will_unmount};
+            },
+            render: function() {
+              instance = #{type.new(`this`)};
+              return #{`instance`.render.to_n};
+            }
+          })
+        }
+
+        params << @@component_classes[type.to_s]
+      else
+        raise "#{type} not implemented" unless HTML_TAGS.include?(type)
+        params << type
+      end
+
+      # Passed in properties
+      props = {}
+      properties.map do |key, value|
+         if key == "class_name" && value.is_a?(Hash)
+           props[lower_camelize(key)] = `React.addons.classSet(#{value.to_n})`
+         else
+           props[React::ATTRIBUTES.include?(lower_camelize(key)) ? lower_camelize(key) : key] = value
+         end
+      end
+      params << props.shallow_to_n
+
+      # Children Nodes
+      if block_given?
+        children = [yield].flatten.each do |ele|
+          params << ele.to_n
+        end
+      end
+
+      return React::Element.new(`React.createElement.apply(null, #{params})`)
+    end
+
+    def self.clear_component_class_cache
+      @@component_classes = {}
+    end
+
+    private
+
+    def self.lower_camelize(snake_cased_word)
+      words = snake_cased_word.split("_")
+      result = [words.first]
+      result.concat(words[1..-1].map {|word| word[0].upcase + word[1..-1] })
+      result.join("")
+    end
+  end
+end

data/lib/react/callbacks.rb

@@ -0,0 +1,35 @@
+require 'active_support/core_ext/class/attribute'
+
+module React
+  module Callbacks
+    def self.included(base)
+      base.extend(ClassMethods)
+    end
+
+    def run_callback(name, *args)
+      attribute_name = "_#{name}_callbacks"
+      callbacks = self.class.send(attribute_name)
+      callbacks.each do |callback|
+        if callback.is_a?(Proc)
+          instance_exec(*args, &callback)
+        else
+          send(callback, *args)
+        end
+      end
+    end
+
+    module ClassMethods
+      def define_callback(callback_name)
+        attribute_name = "_#{callback_name}_callbacks"
+        class_attribute(attribute_name)
+        self.send("#{attribute_name}=", [])
+        define_singleton_method(callback_name) do |*args, &block|
+          callbacks = self.send(attribute_name)
+          callbacks.concat(args)
+          callbacks.push(block) if block_given?
+          self.send("#{attribute_name}=", callbacks)
+        end
+      end
+    end
+  end
+end

data/lib/react/component.rb

@@ -0,0 +1,197 @@
+require "./ext/string"
+require 'active_support/core_ext/class/attribute'
+require 'react/callbacks'
+require "react/ext/hash"
+
+module React
+  module Component
+    def self.included(base)
+      base.include(API)
+      base.include(React::Callbacks)
+      base.class_eval do
+        class_attribute :init_state, :validator
+        define_callback :before_mount
+        define_callback :after_mount
+        define_callback :before_receive_props
+        define_callback :before_update
+        define_callback :after_update
+        define_callback :before_unmount
+      end
+      base.extend(ClassMethods)
+    end
+
+    def initialize(native_element)
+      @native = native_element
+    end
+
+    def params
+      Hash.new(`#{@native}.props`)
+    end
+
+    def refs
+      Hash.new(`#{@native}.refs`)
+    end
+
+    def state
+      raise "No native ReactComponent associated" unless @native
+      Hash.new(`#{@native}.state`)
+    end
+
+    def emit(event_name, *args)
+      self.params["_on#{event_name.to_s.event_camelize}"].call(*args)
+    end
+
+    def component_will_mount
+      self.run_callback(:before_mount)
+    end
+
+    def component_did_mount
+      self.run_callback(:after_mount)
+    end
+
+    def component_will_receive_props(next_props)
+      self.run_callback(:before_receive_props, Hash.new(next_props))
+    end
+
+    def should_component_update?(next_props, next_state)
+      self.respond_to?(:needs_update?) ? self.needs_update?(Hash.new(next_props), Hash.new(next_state)) : true
+    end
+
+    def component_will_update(next_props, next_state)
+      self.run_callback(:before_update, Hash.new(next_props), Hash.new(next_state))
+    end
+
+    def component_did_update(prev_props, prev_state)
+      self.run_callback(:after_update, Hash.new(prev_props), Hash.new(prev_state))
+    end
+
+    def component_will_unmount
+      self.run_callback(:before_unmount)
+    end
+
+    def method_missing(name, *args, &block)
+      unless (React::HTML_TAGS.include?(name) || name == 'present')
+        return super
+      end
+
+      if name == "present"
+        name = args.shift
+      end
+
+      @buffer = [] unless @buffer
+      if block
+        current = @buffer
+        @buffer = []
+        result = block.call
+        element = React.create_element(name, *args) { @buffer.count == 0 ? result : @buffer }
+        @buffer = current
+      else
+        element = React.create_element(name, *args)
+      end
+
+      @buffer << element
+      element
+    end
+
+
+    module ClassMethods
+      def prop_types
+        if self.validator
+          {
+            _componentValidator: %x{
+              function(props, propName, componentName) {
+                var errors = #{validator.validate(Hash.new(`props`))};
+                var error = new Error(#{"In component `" + self.name + "`\n" + `errors`.join("\n")});
+                return #{`errors`.count > 0 ? `error` : `undefined`};
+              }
+            }
+          }
+        else
+          {}
+        end
+      end
+
+      def initial_state
+        self.init_state || {}
+      end
+
+      def default_props
+        self.validator ? self.validator.default_props : {}
+      end
+
+      def params(&block)
+        self.validator = React::Validator.build(&block)
+      end
+
+      def define_state(*states)
+        raise "Block could be only given when define exactly one state" if block_given? && states.count > 1
+
+        self.init_state = {} unless self.init_state
+
+        if block_given?
+          self.init_state[states[0]] = yield
+        end
+        states.each do |name|
+          # getter
+          define_method("#{name}") do
+            return unless @native
+            self.state[name]
+          end
+          # setter
+          define_method("#{name}=") do |new_state|
+            return unless @native
+            hash = {}
+            hash[name] = new_state
+            self.set_state(hash)
+
+            new_state
+          end
+        end
+      end
+    end
+
+    module API
+      include Native
+
+      alias_native :dom_node, :getDOMNode
+      alias_native :mounted?, :isMounted
+      alias_native :force_update!, :forceUpdate
+
+      def set_props(prop, &block)
+        raise "No native ReactComponent associated" unless @native
+        %x{
+          #{@native}.setProps(#{prop.shallow_to_n}, function(){
+            #{block.call if block}
+          });
+        }
+      end
+
+      def set_props!(prop, &block)
+        raise "No native ReactComponent associated" unless @native
+        %x{
+          #{@native}.replaceProps(#{prop.shallow_to_n}, function(){
+            #{block.call if block}
+          });
+        }
+      end
+
+      def set_state(state, &block)
+        raise "No native ReactComponent associated" unless @native
+        %x{
+          #{@native}.setState(#{state.shallow_to_n}, function(){
+            #{block.call if block}
+          });
+        }
+      end
+
+      def set_state!(state, &block)
+        raise "No native ReactComponent associated" unless @native
+        %x{
+          #{@native}.replaceState(#{state.shallow_to_n}, function(){
+            #{block.call if block}
+          });
+        }
+      end
+    end
+  end
+end

data/lib/react/element.rb

@@ -0,0 +1,63 @@
+require "./ext/string"
+
+module React
+  class Element
+    include Native
+
+    alias_native :element_type, :type
+    alias_native :props, :props
+
+    def initialize(native_element)
+      @native = native_element
+    end
+
+    def on(event_name)
+      name = event_name.to_s.event_camelize
+      if React::Event::BUILT_IN_EVENTS.include?("on#{name}")
+        self.props["on#{name}"] = %x{
+          function(event){
+            #{yield React::Event.new(`event`)}
+          }
+        }
+      else
+        self.props["_on#{name}"] = %x{
+          function(){
+            #{yield *Array(`arguments`)}
+          }
+        }
+      end
+      self
+    end
+
+    def children
+      nodes = self.props.children
+      class << nodes
+        include Enumerable
+
+        def to_n
+          self
+        end
+
+        def each(&block)
+          if block_given?
+            %x{
+              React.Children.forEach(#{self.to_n}, function(context){
+                #{block.call(React::Element.new(`context`))}
+              })
+            }
+          else
+            Enumerator.new(`React.Children.count(#{self.to_n})`) do |y|
+              %x{
+                React.Children.forEach(#{self.to_n}, function(context){
+                  #{y << React::Element.new(`context`)}
+                })
+              }
+            end
+          end
+        end
+      end
+
+      nodes
+    end
+  end
+end

data/lib/react/event.rb

@@ -0,0 +1,76 @@
+module React
+  class Event
+    include Native
+    alias_native :bubbles, :bubbles
+    alias_native :cancelable, :cancelable
+    alias_native :current_target, :currentTarget
+    alias_native :default_prevented, :defaultPrevented
+    alias_native :event_phase, :eventPhase
+    alias_native :is_trusted?, :isTrusted
+    alias_native :native_event, :nativeEvent
+    alias_native :target, :target
+    alias_native :timestamp, :timeStamp
+    alias_native :event_type, :type
+    alias_native :prevent_default, :preventDefault
+    alias_native :stop_propagation, :stopPropagation
+    # Clipboard
+    alias_native :clipboard_data, :clipboardData
+    # Keyboard
+    alias_native :alt_key, :altKey
+    alias_native :char_code, :charCode
+    alias_native :ctrl_key, :ctrlKey
+    alias_native :get_modifier_state, :getModifierState
+    alias_native :key, :key
+    alias_native :key_code, :keyCode
+    alias_native :locale, :locale
+    alias_native :location, :location
+    alias_native :meta_key, :metaKey
+    alias_native :repeat, :repeat
+    alias_native :shift_key, :shiftKey
+    alias_native :which, :which
+    # Focus
+    alias_native :related_target, :relatedTarget
+    # Mouse
+    alias_native :alt_key, :altKey
+    alias_native :button, :button
+    alias_native :buttons, :buttons
+    alias_native :client_x, :clientX
+    alias_native :client_y, :clientY
+    alias_native :ctrl_key, :ctrlKey
+    alias_native :get_modifier_state, :getModifierState
+    alias_native :meta_key, :metaKey
+    alias_native :page_x, :pageX
+    alias_native :page_y, :pageY
+    alias_native :related_target, :relatedTarget
+    alias_native :screen_x, :screen_x
+    alias_native :screen_y, :screen_y
+    alias_native :shift_key, :shift_key
+    # Touch
+    alias_native :alt_key, :altKey
+    alias_native :changed_touches, :changedTouches
+    alias_native :ctrl_key, :ctrlKey
+    alias_native :get_modifier_state, :getModifierState
+    alias_native :meta_key, :metaKey
+    alias_native :shift_key, :shiftKey
+    alias_native :target_touches, :targetTouches
+    alias_native :touches, :touches
+    # UI
+    alias_native :detail, :detail
+    alias_native :view, :view
+    # Wheel
+    alias_native :delta_mode, :deltaMode
+    alias_native :delta_x, :deltaX
+    alias_native :delta_y, :deltaY
+    alias_native :delta_z, :deltaZ
+
+    BUILT_IN_EVENTS = %w{onCopy onCut onPaste onKeyDown onKeyPress onKeyUp
+      onFocus onBlur onChange onInput onSubmit onClick onDoubleClick onDrag
+      onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop
+      onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver
+      onMouseUp onTouchCancel onTouchEnd onTouchMove onTouchStart onScroll}
+
+    def initialize(native_element)
+      @native = native_element
+    end
+  end
+end