hyper-component 0.12.3 → 0.99.0

data/LICENSE

@@ -1,6 +1,4 @@
-MIT License
-
-Copyright (c) 2017 Ruby Hyperloop
+Copyright (c) 2015 Yi-Cheng Chang (http://github.com/zetachang)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +7,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,49 @@
+<div class="githubhyperloopheader">
+
+<p align="center">
+
+<a href="http://ruby-hyperloop.org/" alt="Hyperloop" title="Hyperloop">
+<img width="350px" src="http://ruby-hyperloop.org/images/hyperloop-github-logo.png">
+</a>
+
+</p>
+
+<h2 align="center">The Complete Isomorphic Ruby Framework</h2>
+
+<br>
+
+<a href="http://ruby-hyperloop.org/" alt="Hyperloop" title="Hyperloop">
+<img src="http://ruby-hyperloop.org/images/githubhyperloopbadge.png">
+</a>
+
+<a href="https://gitter.im/ruby-hyperloop/chat" alt="Gitter chat" title="Gitter chat">
+<img src="http://ruby-hyperloop.org/images/githubgitterbadge.png">
+</a>
+
+[![Build Status](https://travis-ci.org/ruby-hyperloop/hyper-react.svg?branch=master)](https://travis-ci.org/ruby-hyperloop/hyper-react)
+[![Gem Version](https://badge.fury.io/rb/hyper-react.svg)](https://badge.fury.io/rb/hyper-react)
+
+<p align="center">
+<img src="http://ruby-hyperloop.org/images/HyperComponents.png" width="100" alt="Hyper-components">
+</p>
+
+</div>
+
+## Hyper-React GEM is part of Hyperloop GEMS family
+
+Hyper-react GEM comes with the Hyperloop GEM. 
+
+But if you want to install it separately, please install the [Hyper-component GEM](https://github.com/ruby-hyperloop/hyper-component).
+
+## Community
+
+#### Getting Help
+Please **do not post** usage questions to GitHub Issues. For these types of questions use our [Gitter chatroom](https://gitter.im/ruby-hyperloop/chat) or [StackOverflow](http://stackoverflow.com/questions/tagged/hyperloop).
+
+#### Submitting Bugs and Enhancements
+[GitHub Issues](https://github.com/ruby-hyperloop/hyperloop/issues) is for suggesting enhancements and reporting bugs. Before submiting a bug make sure you do the following:
+* Check out our [contributing guide](https://github.com/ruby-hyperloop/hyperloop/blob/master/CONTRIBUTING.md) for info on our release cycle.
+
+## License
+
+Hyperloop is released under the [MIT License](http://www.opensource.org/licenses/MIT).

data/Rakefile

@@ -1,2 +1,42 @@
+# require 'bundler'
+# Bundler.require
+# Bundler::GemHelper.install_tasks
+#
+# # Store the BUNDLE_GEMFILE env, since rake or rspec seems to clean it
+# # while invoking task.
+# ENV['REAL_BUNDLE_GEMFILE'] = ENV['BUNDLE_GEMFILE']
+#
+# require 'rspec/core/rake_task'
+# require 'opal/rspec/rake_task'
+#
+# RSpec::Core::RakeTask.new('ruby:rspec')
+#
+# task :test do
+#   Rake::Task['ruby:rspec'].invoke
+# end
+#
+# require 'generators/reactive_ruby/test_app/test_app_generator'
+# desc "Generates a dummy app for testing"
+# task :test_app do
+#   ReactiveRuby::TestAppGenerator.start
+#   puts "Setting up test app database..."
+#   system("bundle exec rake db:drop db:create db:migrate > #{File::NULL}")
+# end
+#
+# task :test_prepare do
+#   system("./dciy_prepare.sh")
+# end
+#
+# task default: [ :test ]
+
 require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+namespace :spec do
+  task :prepare do
+  end
+end
+
 task :default => :spec

data/hyper-component.gemspec

@@ -1,41 +1,51 @@
-# coding: utf-8
-lib = File.expand_path('../lib', __FILE__)
-$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
-require 'hyperloop/component/version'
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path('../lib/', __FILE__)
+require 'reactive-ruby/version'
 
 Gem::Specification.new do |spec|
-  spec.name          = "hyper-component"
+  spec.name          = 'hyper-component'
   spec.version       = Hyperloop::Component::VERSION
-  spec.authors       = ["catmando"]
-  spec.email         = ["mitch@catprint.com"]
 
-  spec.summary       = %q{The Hyperloop rendering engine.  Write React components in Ruby.}
-  spec.homepage      = "http://ruby-hyperloop.io"
-  spec.license       = "MIT"
+  spec.authors       = ['David Chang', 'Adam Jahn', 'Mitch VanDuyn', 'Jan Biedermann', 'Adam Creekroad']
+  spec.email         = ['mitch@catprint.com']
+  spec.homepage      = 'http://ruby-hyperloop.org'
+  spec.summary       = 'Opal Ruby wrapper of React.js library.'
+  spec.license       = 'MIT'
+  spec.description   = 'Write React UI components in pure Ruby.'
+  # spec.metadata      = {
+  #   "homepage_uri" => 'http://ruby-hyperloop.org',
+  #   "source_code_uri" => 'https://github.com/ruby-hyperloop/hyper-component'
+  # }
 
-  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
-  spec.bindir        = "exe"
-  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
-  spec.require_paths = ["lib"]
+  spec.files         = `git ls-files`.split("\n").reject { |f| f.match(%r{^(gemfiles|spec)/}) }
+  spec.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  spec.require_paths = ['lib']
 
-  spec.add_dependency 'hyper-react', '>= 0.12.3'
-  spec.add_dependency 'hyperloop-config', '>= 0.9.2'
-  spec.add_dependency 'react-rails', '< 1.10.0'
-  spec.add_dependency 'opal-rails', '~> 0.9.0'
+  spec.add_dependency 'hyper-store', Hyperloop::Component::VERSION
+  spec.add_dependency 'hyperloop-config', Hyperloop::Component::VERSION
+  spec.add_dependency 'libv8', '~> 6.3.0' # see https://github.com/discourse/mini_racer/issues/92
+  spec.add_dependency 'mini_racer', '~> 0.1.15'
+  spec.add_dependency 'opal', '>= 0.11.0', '< 0.12.0'
+  spec.add_dependency 'opal-activesupport', '~> 0.3.1'
+  spec.add_dependency 'react-rails', '>= 2.4.0', '< 2.5.0'
 
-  spec.add_development_dependency 'hyper-spec'
+  spec.add_development_dependency 'bundler', '~> 1.16.0'
+  spec.add_development_dependency 'chromedriver-helper'
+  spec.add_development_dependency 'hyper-spec', Hyperloop::Component::VERSION
+  spec.add_development_dependency 'jquery-rails'
   spec.add_development_dependency 'listen'
-  spec.add_development_dependency 'opal'
-  spec.add_development_dependency 'opal-browser'
-  spec.add_development_dependency 'pry-byebug'
-  spec.add_development_dependency 'rails'
-  spec.add_development_dependency 'rspec'
-  spec.add_development_dependency 'rspec-steps'
+  spec.add_development_dependency 'mime-types'
+  spec.add_development_dependency 'nokogiri'
+  spec.add_development_dependency 'opal-jquery'
+  spec.add_development_dependency 'opal-rails', '~> 0.9.4'
+  spec.add_development_dependency 'opal-rspec'
+  spec.add_development_dependency 'pry'
+  spec.add_development_dependency 'puma'
+  spec.add_development_dependency 'rails', '>= 4.0.0'
+  spec.add_development_dependency 'rails-controller-testing'
+  spec.add_development_dependency 'rake'
+  spec.add_development_dependency 'rspec-rails'
+  spec.add_development_dependency 'rubocop', '~> 0.51.0'
   spec.add_development_dependency 'sqlite3'
-
-  # Keep linter-rubocop happy
-  spec.add_development_dependency 'rubocop'
-
-  spec.add_development_dependency "bundler", "~> 1.12"
-  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency 'timecop', '~> 0.8.1'
 end

data/lib/hyper-component.rb

@@ -1,18 +1,53 @@
-require "hyperloop/component/version"
 require 'hyperloop-config'
-Hyperloop.import 'hyper-component'
+Hyperloop.import 'hyper-store'
+Hyperloop.js_import 'react/react-source-browser', client_only: true, defines: ['ReactDOM', 'React']
+Hyperloop.js_import 'react/react-source-server', server_only: true, defines: 'React'
+Hyperloop.import 'browser/delay', client_only: true
+Hyperloop.js_import 'react_ujs', defines: 'ReactRailsUJS'
+
 if RUBY_ENGINE == 'opal'
   module Hyperloop
     class Component
-      # defining this before requring hyper-react will turn
-      # off the hyper-react deprecation notice
     end
   end
-  require 'hyper-react'
+  require 'native'
+  require 'react/observable'
+  require 'react/validator'
+  require 'react/element'
+  require 'react/api'
+  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/event'
+  require 'react/rendering_context'
+  require 'react/state'
+  require 'react/object'
+  require 'react/to_key'
+  require 'react/ext/opal-jquery/element'
+  require 'reactive-ruby/isomorphic_helpers'
+  require 'react/top_level'
+  require 'react/top_level_render'
+  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
 else
   require 'opal'
-  require 'hyper-react'
-  require 'react-rails'
-  require 'opal-rails'
-  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,79 @@
+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
+      top_level_render
+    end
+
+    def top_level_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,270 @@
+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.add_after_error_hook(klass)
+      add_after_error_hook_to_native(@@component_classes[klass])
+    end
+
+    def self.add_after_error_hook_to_native(native_comp)
+      return unless native_comp
+      %x{
+        native_comp.prototype.componentDidCatch = function(error, info) {
+          this.__opalInstanceSyncSetState = false;
+          this.__opalInstance.$component_did_catch(error, Opal.Hash.$new(info));
+        }
+      }
+    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] ||= begin
+        comp = %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;
+              this.__name = #{type.name};
+            }
+            static get displayName() {
+              if (typeof this.__name != "undefined") {
+                return this.__name;
+              } else {
+                return #{type.name};
+              }
+            }
+            static set displayName(name) {
+              this.__name = 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() {
+              if (#{type.method_defined? :component_will_unmount}) {
+                this.__opalInstanceSyncSetState = false;
+                this.__opalInstance.$component_will_unmount();
+              }
+              this.__opalInstance.is_mounted = false;
+            }
+
+            render() {
+              this.__opalInstanceSyncSetState = false;
+              return this.__opalInstance.$send(render_fn).$to_n();
+            }
+          }
+        }
+        # check to see if there is an after_error callback.  If there is add a
+        # componentDidCatch handler. Because legacy behavior is to allow any object
+        # that responds to render to act as a component we have to make sure that
+        # we have a callbacks_for method.  This all becomes much easier once issue
+        # #270 is resolved.
+        if type.respond_to?(:callbacks_for) && type.callbacks_for(:after_error) != []
+          add_after_error_hook_to_native comp
+        end
+        comp
+      end
+    end
+
+    def self.create_element(type, *args, &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(args)
+      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(args)
+      # merge args together into a single properties hash
+      properties = {}
+      args.each do |arg|
+        if arg.is_a? String
+          properties[arg] = true
+        elsif arg.is_a? Hash
+          arg.each do |key, value|
+            if ['class', 'className', 'class_name'].include? key
+              next unless value
+
+              if value.is_a?(String)
+                value = value.split(' ')
+              elsif !value.is_a?(Array)
+                raise "The class param must be a string or array of strings"
+              end
+
+              properties['className'] = [*properties['className'], *value]
+            elsif key == 'style'
+              next unless value
+
+              if !value.is_a?(Hash)
+                raise "The style param must be a Hash"
+              end
+
+              properties['style'] = (properties['style'] || {}).merge(value)
+            elsif React::HASH_ATTRIBUTES.include?(key) && value.is_a?(Hash)
+              properties[key] = (properties[key] || {}).merge(value)
+            else
+              properties[key] = value
+            end
+          end
+        end
+      end
+      # process properties according to react rules
+      props = {}
+      properties.each do |key, value|
+        if ["style", "dangerously_set_inner_HTML"].include? key
+          props[lower_camelize(key)] = value.to_n
+
+        elsif key == "className"
+          props[key] = value.join(' ')
+
+        elsif key == "key"
+          props["key"] = value.to_key
+
+        elsif key == 'ref' && value.is_a?(Proc)
+          props[key] = %x{
+                          function(dom_node){
+                            if (dom_node !== null && dom_node.__opalInstance !== undefined && dom_node.__opalInstance !== null) {
+                              #{ value.call(`dom_node.__opalInstance`) };
+                            } else if(dom_node !== null && 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.gsub(/__|_/, '__' => '_', '_' => '-')}"] = 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