hyper-component 1.0.alpha1.3 → 1.0.alpha1.8

data/lib/hyperstack/component/version.rb

@@ -1,5 +1,5 @@
 module Hyperstack
   module Component
-    VERSION = '1.0.alpha1.3' # '1.0.alpha1.3'
+    VERSION = '1.0.alpha1.8' # '1.0.alpha1.5'
   end
 end

data/lib/hyperstack/component/while_loading.rb

@@ -16,7 +16,7 @@ module Hyperstack
       if Hyperstack::Component::IsomorphicHelpers.on_opal_client?
         %x{
           function onError(event) {
-            if (event.message.startsWith('Uncaught NotQuiet: ')) event.preventDefault();
+            if (event.message.match(/^Uncaught NotQuiet: /)) event.preventDefault();
           }
 
           window.addEventListener('error', onError);

data/lib/hyperstack/ext/component/array.rb

@@ -0,0 +1,20 @@
+# from Rails 6.0 activesupport.  Remove once defined by Opal activesupport
+class Array
+  # Removes and returns the elements for which the block returns a true value.
+  # If no block is given, an Enumerator is returned instead.
+  #
+  #   numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  #   odd_numbers = numbers.extract! { |number| number.odd? } # => [1, 3, 5, 7, 9]
+  #   numbers # => [0, 2, 4, 6, 8]
+  def extract!
+    return to_enum(:extract!) { size } unless block_given?
+
+    extracted_elements = []
+
+    reject! do |element|
+      extracted_elements << element if yield(element)
+    end
+
+    extracted_elements
+  end
+end

data/lib/hyperstack/ext/component/element.rb

@@ -1,11 +1,9 @@
 Element.instance_eval do
   def self.find(selector)
-    selector = begin
-      selector.dom_node
-    rescue
-      selector
-    end if `#{selector}.$dom_node !== undefined`
-    `$(#{selector})`
+    if `typeof #{selector}['$respond_to?'] == 'function'` && selector.respond_to?(:dom_node)
+      selector = selector.dom_node
+    end
+    `jQuery(#{selector})`
   end
 
   def self.[](selector)
@@ -37,7 +35,7 @@ Element.instance_eval do
   # see react-rails documentation for more details
 
   %x{
-    $.fn.mount_components = function() {
+    jQuery.fn.mount_components = function() {
       this.each(function(e) { ReactRailsUJS.mountComponents(e[0]) })
       return this;
     }

data/lib/hyperstack/ext/component/enumerable.rb

@@ -0,0 +1,18 @@
+# from Rails 6.0 activesupport.  Remove once defined by Opal activesupport
+module Enumerable
+  INDEX_WITH_DEFAULT = Object.new
+  private_constant :INDEX_WITH_DEFAULT
+  def index_with(default = INDEX_WITH_DEFAULT)
+    if block_given?
+      result = {}
+      each { |elem| result[elem] = yield(elem) }
+      result
+    elsif default != INDEX_WITH_DEFAULT
+      result = {}
+      each { |elem| result[elem] = default }
+      result
+    else
+      to_enum(:index_with) { size if respond_to?(:size) }
+    end
+  end
+end

data/lib/hyperstack/ext/component/kernel.rb

@@ -0,0 +1,7 @@
+module Kernel
+  def pause(s, &block)
+    Promise.new.tap { |p| after(s) { p.resolve(*(block && [block.call])) }}
+  end
+  alias busy_sleep sleep
+  alias sleep pause
+end

data/lib/hyperstack/ext/component/time.rb

@@ -0,0 +1,5 @@
+class Time
+  def to_json
+    strftime("%FT%T.%3N%z").to_json
+  end
+end

data/lib/hyperstack/internal/component/class_methods.rb

@@ -50,7 +50,7 @@ module Hyperstack
         def render(container = nil, params = {}, &block)
           Tags.included(self)
           if container
-            container = container.type if container.is_a? Hyperstack::Component::Element
+            container = container.element_type if container.is_a? Hyperstack::Component::Element
             define_method(:__hyperstack_component_render) do
               __hyperstack_component_select_wrappers do
                 RenderingContext.render(container, params) do
@@ -271,7 +271,8 @@ module Hyperstack
           ReactWrapper.import_native_component(
             self, ReactWrapper.eval_native_react_component(component_name)
           )
-          define_method(:render) {} # define a dummy render method - will never be called...
+          render {}
+          #define_method(:render) {} # define a dummy render method - will never be called...
         rescue Exception => e # rubocop:disable Lint/RescueException : we need to catch everything!
           raise "#{self} cannot import '#{component_name}': #{e.message}."
           # rubocop:enable Lint/RescueException
@@ -291,7 +292,7 @@ module Hyperstack
         end
 
         def to_n
-          ReactWrapper.class_eval('@@component_classes')[self]
+          Hyperstack::Internal::Component::ReactWrapper.create_native_react_class(self)
         end
       end
     end

data/lib/hyperstack/internal/component/haml.rb

@@ -27,7 +27,9 @@ module Hyperstack
           Hyperstack::Internal::Component::RenderingContext.replace(
             self,
             Hyperstack::Internal::Component::RenderingContext.build do
-              Hyperstack::Internal::Component::RenderingContext.render(type, build_new_properties(class_name, args), &new_block)
+              Hyperstack::Internal::Component::RenderingContext.render(
+                element_type, @properties, args, class: haml_class_name(class_name), &new_block
+              )
             end
           )
         end
@@ -39,17 +41,6 @@ module Hyperstack
         def haml_class_name(class_name)
           class_name.gsub(/__|_/, '__' => '_', '_' => '-')
         end
-
-        private
-
-        def build_new_properties(class_name, args)
-          class_name = haml_class_name(class_name)
-          new_props = @properties.dup
-          new_props[:className] = "\
-            #{class_name} #{new_props[:className]} #{args.delete(:class)} #{args.delete(:className)}\
-          ".split(' ').uniq.join(' ')
-          new_props.merge! args
-        end
       end
     end
   end

data/lib/hyperstack/internal/component/props_wrapper.rb

@@ -48,21 +48,23 @@ module Hyperstack
           end
 
           def define_param(name, param_type, aka = nil)
-            meth_name = aka || name
-            var_name = fix_suffix(aka) || instance_var_name_for(name)
-            param_definitions[name] = lambda do |props|
-              @component.instance_variable_set :"@#{var_name}", val = fetch_from_cache(name, param_type, props)
-              next unless param_accessor_style == :accessors
-              `#{@component}[#{"$#{meth_name}"}] = function() { return #{val} }`
-              # @component.define_singleton_method(name) { val } if param_accessor_style == :accessors
+            if param_accessor_style != :legacy || aka
+              meth_name = aka || name
+              var_name = fix_suffix(aka) || instance_var_name_for(name)
+              param_definitions[name] = lambda do |props|
+                @component.instance_variable_set :"@#{var_name}", val = fetch_from_cache(name, param_type, props)
+                next unless param_accessor_style == :accessors
+                `#{@component}[#{"$#{meth_name}"}] = function() { return #{val} }`
+                # @component.define_singleton_method(name) { val } if param_accessor_style == :accessors
+              end
+              return if %i[hyperstack accessors].include? param_accessor_style
             end
-            return if %i[hyperstack accessors].include? param_accessor_style
             if param_type == Proc
-              define_method(meth_name.to_sym) do |*args, &block|
+              define_method(name.to_sym) do |*args, &block|
                 props[name].call(*args, &block) if props[name]
               end
             else
-              define_method(meth_name.to_sym) do
+              define_method(name.to_sym) do
                 fetch_from_cache(name, param_type, props)
               end
             end
@@ -88,7 +90,7 @@ module Hyperstack
 
         def initialize(component, incoming = nil)
           @component = component
-          return if param_accessor_style == :legacy
+          #return if param_accessor_style == :legacy
           self.class.param_definitions.each_value do |initializer|
             instance_exec(incoming || props, &initializer)
           end

data/lib/hyperstack/internal/component/rails/component_mount.rb

@@ -43,6 +43,9 @@ module Hyperstack
           end
 
           def footers
+            return if @hyperstack_footers_rendered
+
+            @hyperstack_footers_rendered = true
             Hyperstack::Component::IsomorphicHelpers.prerender_footers(controller)
           end
         end
@@ -50,3 +53,12 @@ module Hyperstack
     end
   end
 end
+
+
+module React
+  module Rails
+    module ViewHelper
+      alias mount_component react_component
+    end
+  end
+end

data/lib/hyperstack/internal/component/rails/controller_helper.rb

@@ -22,7 +22,7 @@ module ActionController
       @render_params = args.shift || {}
       options = args[0] || {}
       return if performed?
-      render inline: '<%= react_component @component_name, @render_params %>',
+      render inline: '<%= mount_component @component_name, @render_params %>',
              layout: options.key?(:layout) ? options[:layout].to_s : :default
     rescue Exception => e
       m = /^RuntimeError: Hyperstack::Internal::Component::Redirect (.+) status: (.+)$/.match(e.message)

data/lib/hyperstack/internal/component/rails/railtie.rb

@@ -12,8 +12,9 @@ module Hyperstack
           end
           config.after_initialize do
             class ::HyperstackController < ::ApplicationController
-              def action_missing(_name)
-                render_component
+              def action_missing(*)
+                parts = params[:action].split('__')
+                render_component (parts[0..-2]+[parts.last.camelize]).join('::')
               end
             end
           end

data/lib/hyperstack/internal/component/rails/server_rendering/contextual_renderer.rb

@@ -13,7 +13,11 @@ module Hyperstack
 
           class ContextualRenderer < React::ServerRendering::BundleRenderer
             def initialize(options = {})
-              super(options)
+              unless v8_runtime?
+                raise "Hyperstack prerendering only works with MiniRacer. Add 'mini_racer' to your Gemfile"
+              end
+
+              super({ files: ['hyperstack-prerender-loader.js'] }.merge(options))
               ComponentLoader.new(v8_context).load
             end
 

data/lib/hyperstack/internal/component/rails/server_rendering/hyper_asset_container.rb

@@ -9,7 +9,9 @@ module Hyperstack
         module ServerRendering
           class HyperTestAssetContainer
             def find_asset(logical_path)
-              ::Rails.cache.read(logical_path)
+              # we skip the container if it raises an error so we
+              # don't care if we are running under hyperspec or not
+              HyperSpec::Internal::Controller.cache_read(logical_path)
             end
           end
 
@@ -24,7 +26,7 @@ module Hyperstack
               if React::ServerRendering::WebpackerManifestContainer.compatible?
                 @ass_containers << React::ServerRendering::WebpackerManifestContainer.new
               end
-              @ass_containers << HyperTestAssetContainer.new  if ::Rails.env.test?
+              @ass_containers << HyperTestAssetContainer.new
             end
 
             def find_asset(logical_path)

data/lib/hyperstack/internal/component/react_wrapper.rb

@@ -18,6 +18,10 @@ module Hyperstack
       class ReactWrapper
         @@component_classes = {}
 
+        def self.stateless?(ncc)
+          `typeof #{ncc} === 'symbol' || (typeof #{ncc} === 'function' && !(#{ncc}.prototype && #{ncc}.prototype.isReactComponent))`
+        end
+
         def self.import_native_component(opal_class, native_class)
           opal_class.instance_variable_set("@native_import", true)
           @@component_classes[opal_class] = native_class
@@ -26,12 +30,13 @@ module Hyperstack
         def self.eval_native_react_component(name)
           component = `eval(name)`
           raise "#{name} is not defined" if `#{component} === undefined`
+
+          component = `component.default` if `component.__esModule`
           is_component_class = `#{component}.prototype !== undefined` &&
                                 (`!!#{component}.prototype.isReactComponent` ||
                                  `!!#{component}.prototype.render`)
-          is_functional_component = `typeof #{component} === "function"`
           has_render_method = `typeof #{component}.render === "function"`
-          unless is_component_class || is_functional_component || has_render_method
+          unless is_component_class || stateless?(component) || has_render_method
             raise 'does not appear to be a native react component'
           end
           component
@@ -39,9 +44,11 @@ module Hyperstack
 
         def self.native_react_component?(name = nil)
           return false unless name
+
           eval_native_react_component(name)
           true
-        rescue
+        # Exception to be compatible with all versions of opal
+        rescue Exception # rubocop:disable Lint/RescueException
           false
         end
 
@@ -60,93 +67,81 @@ module Hyperstack
         end
 
         def self.create_native_react_class(type)
+          raise "createReactClass is undefined. Add the 'react-create-class' npm module, and import it as 'createReactClass'" if `typeof(createReactClass)=='undefined'`
           raise "Provided class should define `render` method"  if !(type.method_defined? :render)
-          render_fn = (type.method_defined? :_render_wrapper) ? :_render_wrapper : :render
+          old_school = !type.method_defined?(:_render_wrapper)
+          render_fn = old_school ? :render : :_render_wrapper
           # 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);
+              createReactClass({
+                getInitialState: function() {
                   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 {}
+                },
+                displayName: #{type.name},
+                getDefaultProps: function() {
                   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() {
+                },
+                propTypes: #{type.respond_to?(:prop_types) ? type.prop_types.to_n : `{}`},
+                componentWillMount: old_school && function() {
                   if (#{type.method_defined? :component_will_mount}) {
                     this.__opalInstanceSyncSetState = true;
                     this.__opalInstance.$component_will_mount();
                     this.__opalInstanceSyncSetState = false;
                   }
-                }
-                componentDidMount() {
+                },
+                componentDidMount: function() {
                   this.__opalInstance.__hyperstack_component_is_mounted = true
                   if (#{type.method_defined? :component_did_mount}) {
                     this.__opalInstanceSyncSetState = false;
                     this.__opalInstance.$component_did_mount();
                   }
-                }
-                componentWillReceiveProps(next_props) {
+                },
+                UNSAFE_componentWillReceiveProps: function(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) {
+                },
+                shouldComponentUpdate: function(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) {
+                },
+                UNSAFE_componentWillUpdate: function(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) {
+                },
+                componentDidUpdate: function(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() {
+                },
+                componentWillUnmount: function() {
                   if (#{type.method_defined? :component_will_unmount}) {
                     this.__opalInstanceSyncSetState = false;
                     this.__opalInstance.$component_will_unmount();
                   }
                   this.__opalInstance.__hyperstack_component_is_mounted = false;
-                }
-
-                render() {
+                },
+                render: function() {
                   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
@@ -178,7 +173,9 @@ module Hyperstack
           end
 
           # Convert Passed in properties
-          properties = convert_props(args)
+          ele = nil # create nil var for the ref to use
+          ref = ->(ref) { ele._update_ref(ref) } unless stateless?(ncc)
+          properties = convert_props(type, { ref: ref }, *args)
           params << properties.shallow_to_n
 
           # Children Nodes
@@ -190,14 +187,17 @@ module Hyperstack
               }
             }
           end
-          Hyperstack::Component::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
+          # assign to ele so that the ref callback can use it
+          ele = Hyperstack::Component::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)
+        def self.convert_props(type, *args)
           # merge args together into a single properties hash
           properties = {}
           args.each do |arg|
@@ -234,33 +234,50 @@ module Hyperstack
           # process properties according to react rules
           props = {}
           properties.each do |key, value|
-            if ["style", "dangerously_set_inner_HTML"].include? key
+            if %w[style dangerously_set_inner_HTML].include? key
               props[lower_camelize(key)] = value.to_n
 
-            elsif key == "className"
+            elsif key == :className
               props[key] = value.join(' ')
 
-            elsif key == "key"
-              props["key"] = value.to_key
+            elsif key == :key
+              props[:key] = value.to_key
+
+            elsif key == :init
+              if %w[select textarea].include? type
+                key = :defaultValue
+              elsif type == :input
+                key = if %w[radio checkbox].include? properties[:type]
+                        :defaultChecked
+                      else
+                        :defaultValue
+                      end
+              end
+              props[key] = value
 
             elsif key == 'ref'
+              next unless value
               unless value.respond_to?(:call)
                 raise "The ref and dom params must be given a Proc.\n"\
                       "If you want to capture the ref in an instance variable use the `set` method.\n"\
                       "For example `ref: set(:TheRef)` will capture assign the ref to `@TheRef`\n"
               end
-              props[key] = %x{
-                              function(dom_node){
-                                if (dom_node !== null && dom_node.__opalInstance !== undefined && dom_node.__opalInstance !== null) {
-                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(`dom_node.__opalInstance`) } };
-                                } else if(dom_node !== null && ReactDOM.findDOMNode !== undefined && dom_node.nodeType === undefined) {
-                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(`ReactDOM.findDOMNode(dom_node)`) } };
-                                } else if(dom_node !== null){
-                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(`dom_node`) } };
-                                }
-                              }
+              unless `value.__hyperstack_component_ref_is_already_wrapped`
+                fn = value
+                value = %x{
+                          function(dom_node){
+                            if (dom_node !== null && dom_node.__opalInstance !== undefined && dom_node.__opalInstance !== null) {
+                              #{ Hyperstack::Internal::State::Mapper.ignore_mutations { fn.call(`dom_node.__opalInstance`) } };
+                            } else if(dom_node !== null && ReactDOM.findDOMNode !== undefined && dom_node.nodeType === undefined) {
+                              #{ Hyperstack::Internal::State::Mapper.ignore_mutations { fn.call(`ReactDOM.findDOMNode(dom_node)`) } };
+                            } else if(dom_node !== null){
+                              #{ Hyperstack::Internal::State::Mapper.ignore_mutations { fn.call(`dom_node`) } };
                             }
-
+                          }
+                        }
+                `value.__hyperstack_component_ref_is_already_wrapped = true`
+              end
+              props[key] = value
             elsif key == 'jq_ref'
               unless value.respond_to?(:call)
                 raise "The ref and dom params must be given a Proc.\n"\