hyper-react 0.99.6 → 1.0.0.lap21

data/lib/generators/reactive_ruby/test_app/templates/views/components/todo.rb

@@ -0,0 +1,14 @@
+module Components
+  class Todo
+    include React::Component
+    export_component
+
+    params do
+      requires :todo
+    end
+
+    def render
+      li { "#{params[:todo]}" }
+    end
+  end
+end

data/lib/generators/reactive_ruby/test_app/test_app_generator.rb

@@ -0,0 +1,117 @@
+require 'rails/generators/rails/app/app_generator'
+
+module ReactiveRuby
+  class TestAppGenerator < ::Rails::Generators::Base
+    def self.source_paths
+      paths = self.superclass.source_paths
+      paths << File.expand_path('../templates', __FILE__)
+      paths.flatten
+    end
+
+    def remove_existing_app
+      remove_dir(test_app_path) if File.directory?(test_app_path)
+    end
+
+    def generate_test_app
+      opts = options.dup
+      opts[:database] = 'sqlite3' if opts[:database].blank?
+      opts[:force] = true
+      opts[:skip_bundle] = true
+
+      puts "Generating Test Rails Application..."
+      invoke ::Rails::Generators::AppGenerator,
+        [ File.expand_path(test_app_path, destination_root) ], opts
+    end
+
+    def configure_test_app
+      template 'boot.rb.erb', "#{test_app_path}/config/boot.rb", force: true
+      template 'test_application.rb.erb', "#{test_app_path}/config/application.rb", force: true
+      template 'assets/javascripts/test_application.rb',
+        "#{test_app_path}/app/assets/javascripts/application.rb", force: true
+      template 'assets/javascripts/server_rendering.js',
+               "#{test_app_path}/app/assets/javascripts/server_rendering.js", force: true
+      template 'assets/javascripts/components.rb',
+        "#{test_app_path}/app/views/components.rb", force: true
+      template 'views/components/hello_world.rb',
+        "#{test_app_path}/app/views/components/hello_world.rb", force: true
+      template 'views/components/todo.rb',
+        "#{test_app_path}/app/views/components/todo.rb", force: true
+      template 'views/layouts/test_layout.html.erb',
+        "#{test_app_path}/app/views/layouts/test_layout.html.erb", force: true
+      template 'views/layouts/test_layout.html.erb',
+        "#{test_app_path}/app/views/layouts/explicit_layout.html.erb", force: true
+    end
+
+    def clean_superfluous_files
+      inside test_app_path do
+        remove_file '.gitignore'
+        remove_file 'doc'
+        remove_file 'Gemfile'
+        remove_file 'lib/tasks'
+        remove_file 'app/assets/images/rails.png'
+        remove_file 'app/assets/javascripts/application.js'
+        remove_file 'public/index.html'
+        remove_file 'public/robots.txt'
+        remove_file 'README.rdoc'
+        remove_file 'test'
+        remove_file 'vendor'
+        remove_file 'spec'
+      end
+    end
+
+    def configure_opal_rspec
+      inject_into_file "#{test_app_path}/config/application.rb",
+        after: /class Application < Rails::Application/, verbose: true do
+        %Q[
+    config.opal.method_missing = true
+    config.opal.optimized_operators = true
+    config.opal.arity_check = false
+    config.opal.const_missing = true
+    config.opal.dynamic_require_severity = :ignore
+    config.opal.enable_specs = true
+    config.opal.spec_location = 'spec-opal'
+    config.hyperloop.auto_config = false
+
+    config.react.server_renderer_options = {
+      files: ["server_rendering.js"]
+    }
+    config.react.server_renderer_directories = ["/app/assets/javascripts"]
+]
+      end
+    end
+
+    protected
+
+    def application_definition
+      @application_definition ||= begin
+                                    test_application_contents
+                                  end
+    end
+    alias :store_application_definition! :application_definition
+
+    private
+
+    def test_app_path
+      'spec/test_app'
+    end
+
+    def test_application_path
+      File.expand_path("#{test_app_path}/config/application.rb",
+                       destination_root)
+    end
+
+    def test_application_contents
+      return unless File.exists?(test_application_path) && !options[:pretend]
+      contents = File.read(test_application_path)
+      contents[(contents.index("module #{module_name}"))..-1]
+    end
+
+    def module_name
+      'TestApp'
+    end
+
+    def gemfile_path
+      '../../../../Gemfile'
+    end
+  end
+end

data/lib/hyper-react.rb

@@ -1,8 +1,70 @@
-require 'hyper-component'
-require 'react/version'
+require 'hyperloop-config'
+Hyperloop.import 'hyper-store'
+Hyperloop.import 'react/react-source-browser', client_only: true
+Hyperloop.import 'react/react-source-server', server_only: true
+Hyperloop.import 'browser/delay', client_only: true
 Hyperloop.import 'hyper-react'
+Hyperloop.import 'react_ujs'
 
-if RUBY_ENGINE != 'opal'
+if RUBY_ENGINE == 'opal'
+  module Hyperloop
+    class Component
+    end
+  end
+
+  if `Opal.global.React === undefined || Opal.global.React.version === undefined`
+    raise [
+      "No React.js Available",
+      "",
+      "A global `React` must be defined before requiring 'hyper-react'",
+      "",
+      "To USE THE BUILT-IN SOURCE: ",
+      "   add 'require \"react/react-source-browser\"' immediately before the 'require \"hyper-react\" directive.",
+      "IF USING WEBPACK:",
+      "   add 'react' to your webpack manifest."
+    ].join("\n")
+  end
+  require 'react/hash'
+  require 'react/top_level'
+  require 'react/top_level_render'
+  require 'react/observable'
+  require 'react/validator'
+  require 'react/component'
+  require 'react/component/dsl_instance_methods'
+  require 'react/component/should_component_update'
+  require 'react/component/tags'
+  require 'react/component/base'
+  require 'react/element'
+  require 'react/event'
+  require 'react/api'
+  require 'react/rendering_context'
+  require 'react/state'
+  require 'react/object'
+  require 'react/ext/opal-jquery/element'
+  require 'reactive-ruby/isomorphic_helpers'
+  require 'rails-helpers/top_level_rails_component'
+  require 'reactive-ruby/version'
+  module Hyperloop
+    class Component
+      def self.inherited(child)
+        child.include(Mixin)
+      end
+    end
+  end
+  React::Component.deprecation_warning(
+    'component.rb',
+    "Requiring 'hyper-react' is deprecated.  Use gem 'hyper-component', and require 'hyper-component' instead."
+  ) unless defined? Hyperloop::Component::VERSION
+else
   require 'opal'
-  Opal.append_path(File.expand_path('../', __FILE__).untaint)
+
+  require 'hyper-store'
+  require 'opal-activesupport'
+  require 'reactive-ruby/version'
+  require 'reactive-ruby/rails' if defined?(Rails)
+  require 'reactive-ruby/isomorphic_helpers'
+  require 'reactive-ruby/serializers'
+
+  Opal.append_path File.expand_path('../', __FILE__).untaint
+  require 'react/react-source'
 end

data/lib/rails-helpers/top_level_rails_component.rb

@@ -0,0 +1,75 @@
+module React
+  class TopLevelRailsComponent
+    include Hyperloop::Component::Mixin
+
+    def self.search_path
+      @search_path ||= [Object]
+    end
+
+    export_component
+
+    param :component_name
+    param :controller
+    param :render_params
+
+    backtrace :off
+
+    def render
+      paths_searched = []
+      component = nil
+      if params.component_name.start_with?('::')
+        # if absolute path of component is given, look it up and fail if not found
+        paths_searched << params.component_name
+        component = begin
+                      Object.const_get(params.component_name)
+                    rescue NameError
+                      nil
+                    end
+      else
+        # if relative path is given, look it up like this
+        # 1) we check each path + controller-name + component-name
+        # 2) if we can't find it there we check each path + component-name
+        # if we can't find it we just try const_get
+        # so (assuming controller name is Home)
+        # ::Foo::Bar will only resolve to some component named ::Foo::Bar
+        # but Foo::Bar will check (in this order) ::Home::Foo::Bar, ::Components::Home::Foo::Bar, ::Foo::Bar, ::Components::Foo::Bar
+        self.class.search_path.each do |scope|
+          paths_searched << "#{scope.name}::#{params.controller}::#{params.component_name}"
+          component = begin
+                        scope.const_get(params.controller, false).const_get(params.component_name, false)
+                      rescue NameError
+                        nil
+                      end
+          break if component != nil
+        end
+        unless component
+          self.class.search_path.each do |scope|
+            paths_searched << "#{scope.name}::#{params.component_name}"
+            component = begin
+                          scope.const_get(params.component_name, false)
+                        rescue NameError
+                          nil
+                        end
+            break if component != nil
+          end
+        end
+      end
+      return React::RenderingContext.render(component, params.render_params) if component && component.method_defined?(:render)
+      raise "Could not find component class '#{params.component_name}' for params.controller '#{params.controller}' in any component directory. Tried [#{paths_searched.join(", ")}]"
+    end
+  end
+end
+
+class Module
+  def add_to_react_search_path(replace_search_path = nil)
+    if replace_search_path
+      React::TopLevelRailsComponent.search_path = [self]
+    elsif !React::TopLevelRailsComponent.search_path.include? self
+      React::TopLevelRailsComponent.search_path << self
+    end
+  end
+end
+
+module Components
+  add_to_react_search_path
+end

data/lib/react/api.rb

@@ -0,0 +1,203 @@
+require 'react/native_library'
+
+module React
+  # Provides the internal mechanisms to interface between reactrb and native components
+  # the code will attempt to create a js component wrapper on any rb class that has a
+  # render (or possibly _render_wrapper) method.  The mapping between rb and js components
+  # is kept in the @@component_classes hash.
+
+  # Also provides the mechanism to build react elements
+
+  # TOOO - the code to deal with components should be moved to a module that will be included
+  # in a class which will then create the JS component for that class.  That module will then
+  # be included in React::Component, but can be used by any class wanting to become a react
+  # component (but without other DSL characteristics.)
+  class API
+    @@component_classes = {}
+
+    def self.import_native_component(opal_class, native_class)
+      opal_class.instance_variable_set("@native_import", true)
+      @@component_classes[opal_class] = native_class
+    end
+
+    def self.eval_native_react_component(name)
+      component = `eval(name)`
+      raise "#{name} is not defined" if `#{component} === undefined`
+      is_component_class = `#{component}.prototype !== undefined` &&
+                            (`!!#{component}.prototype.isReactComponent` ||
+                             `!!#{component}.prototype.render`)
+      is_functional_component = `typeof #{component} === "function"`
+      unless is_component_class || is_functional_component
+        raise 'does not appear to be a native react component'
+      end
+      component
+    end
+
+    def self.native_react_component?(name = nil)
+      return false unless name
+      eval_native_react_component(name)
+    rescue
+      nil
+    end
+
+    def self.create_native_react_class(type)
+      raise "Provided class should define `render` method"  if !(type.method_defined? :render)
+      render_fn = (type.method_defined? :_render_wrapper) ? :_render_wrapper : :render
+      # this was hashing type.to_s, not sure why but .to_s does not work as it Foo::Bar::View.to_s just returns "View"
+      @@component_classes[type] ||= %x{
+        class extends React.Component {
+          constructor(props) {
+            super(props);
+            this.mixins = #{type.respond_to?(:native_mixins) ? type.native_mixins : `[]`};
+            this.statics = #{type.respond_to?(:static_call_backs) ? type.static_call_backs.to_n : `{}`};
+            this.state = {};
+            this.__opalInstanceInitializedState = false;
+            this.__opalInstanceSyncSetState = true;
+            this.__opalInstance = #{type.new(`this`)};
+            this.__opalInstanceInitializedState = true;
+            this.__opalInstanceSyncSetState = false;
+          }
+          static get displayName() {
+            return #{type.name};
+          }
+          static get defaultProps() {
+            return #{type.respond_to?(:default_props) ? type.default_props.to_n : `{}`};
+          }
+          static get propTypes() {
+            return  #{type.respond_to?(:prop_types) ? type.prop_types.to_n : `{}`};
+          }
+          componentWillMount() {
+            if (#{type.method_defined? :component_will_mount}) {
+              this.__opalInstanceSyncSetState = true;
+              this.__opalInstance.$component_will_mount();
+              this.__opalInstanceSyncSetState = false;
+            }  
+          }
+          componentDidMount() {
+            this.__opalInstance.is_mounted = true
+            if (#{type.method_defined? :component_did_mount}) {
+              this.__opalInstanceSyncSetState = false;
+              this.__opalInstance.$component_did_mount();
+            }
+          }
+          componentWillReceiveProps(next_props) {
+            if (#{type.method_defined? :component_will_receive_props}) {
+              this.__opalInstanceSyncSetState = true;
+              this.__opalInstance.$component_will_receive_props(Opal.Hash.$new(next_props));
+              this.__opalInstanceSyncSetState = false;
+            }
+          }
+          shouldComponentUpdate(next_props, next_state) {
+            if (#{type.method_defined? :should_component_update?}) {
+              this.__opalInstanceSyncSetState = false;
+              return this.__opalInstance["$should_component_update?"](Opal.Hash.$new(next_props), Opal.Hash.$new(next_state));
+            } else { return true; }
+          }
+          componentWillUpdate(next_props, next_state) {
+            if (#{type.method_defined? :component_will_update}) {
+              this.__opalInstanceSyncSetState = false;
+              this.__opalInstance.$component_will_update(Opal.Hash.$new(next_props), Opal.Hash.$new(next_state));
+            }
+          }
+          componentDidUpdate(prev_props, prev_state) {
+            if (#{type.method_defined? :component_did_update}) {
+              this.__opalInstanceSyncSetState = false;
+              this.__opalInstance.$component_did_update(Opal.Hash.$new(prev_props), Opal.Hash.$new(prev_state));
+            }
+          }
+          componentWillUnmount() {
+            this.__opalInstance.is_mounted = false;
+            if (#{type.method_defined? :component_will_unmount}) {
+              this.__opalInstanceSyncSetState = false;
+              this.__opalInstance.$component_will_unmount();
+            }
+          }
+          componentDidCatch(error, info) {
+            if (#{type.method_defined? :component_did_catch}) {
+              this.__opalInstanceSyncSetState = false;
+              this.__opalInstance.$component_did_catch(error, Opal.Hash.$new(info));
+            }
+          }
+          render() {
+            this.__opalInstanceSyncSetState = false;
+            return this.__opalInstance.$send(render_fn).$to_n();
+          }
+        }
+      }
+    end
+
+    def self.create_element(type, properties = {}, &block)
+      params = []
+
+      # Component Spec, Normal DOM, String or Native Component
+      ncc = @@component_classes[type]
+      if ncc
+        params << ncc
+      elsif type.is_a?(Class)
+        params << create_native_react_class(type)
+      elsif block_given? || React::Component::Tags::HTML_TAGS.include?(type)
+        params << type
+      elsif type.is_a?(String)
+        return React::Element.new(type)
+      else
+        raise "#{type} not implemented"
+      end
+
+      # Convert Passed in properties
+      properties = convert_props(properties)
+      params << properties.shallow_to_n
+
+      # Children Nodes
+      if block_given?
+        a = [yield].flatten
+        %x{
+          for(var i=0, l=a.length; i<l; i++) {
+            params.push(a[i].$to_n());
+          }
+        }
+      end
+      React::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
+    end
+
+    def self.clear_component_class_cache
+      @@component_classes = {}
+    end
+
+    def self.convert_props(properties)
+      raise "Component parameters must be a hash. Instead you sent #{properties}" unless properties.is_a? Hash
+      props = {}
+      properties.each do |key, value|
+        if key == "class" || key == "class_name"
+          props["className"] = value
+        elsif ["style", "dangerously_set_inner_HTML"].include? key
+          props[lower_camelize(key)] = value.to_n
+        elsif key == 'ref' && value.is_a?(Proc)
+          props[key] = %x{
+                          function(dom_node){
+                            if (dom_node.__opalInstance !== undefined && dom_node.__opalInstance !== null) {
+                              #{ value.call(`dom_node.__opalInstance`) };
+                            } else if(ReactDOM.findDOMNode !== undefined && dom_node.nodeType === undefined) {
+                              #{ value.call(`ReactDOM.findDOMNode(dom_node)`) };
+                            } else {
+                              #{ value.call(`dom_node`) };
+                            }
+                          }
+                        }
+        elsif React::HASH_ATTRIBUTES.include?(key) && value.is_a?(Hash)
+          value.each { |k, v| props["#{key}-#{k.tr('_', '-')}"] = v.to_n }
+        else
+          props[React.html_attr?(lower_camelize(key)) ? lower_camelize(key) : key] = value
+        end
+      end
+      props
+    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] }).join('')
+    end
+  end
+end