hyper-component 1.0.alpha1.2 → 1.0.alpha1.7

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

@@ -1,5 +1,19 @@
 require 'action_controller'
 
+module Hyperstack
+  module Internal
+    module Component
+      class Redirect < StandardError
+        attr_reader :url
+        def initialize(url)
+          @url = url
+          super("redirect to #{url}")
+        end
+      end
+    end
+  end
+end
+
 module ActionController
   # adds render_component helper to ActionControllers
   class Base
@@ -7,8 +21,13 @@ module ActionController
       @component_name = (args[0].is_a? Hash) || args.empty? ? params[:action].camelize : args.shift
       @render_params = args.shift || {}
       options = args[0] || {}
-      render inline: '<%= react_component @component_name, @render_params %>',
+      return if performed?
+      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)
+      raise e unless m
+      redirect_to m[1], status: m[2]
     end
   end
 end

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,100 +67,88 @@ 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
             # 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) != []
+            if type.respond_to?(:callbacks?) && type.callbacks?(:after_error)
               add_after_error_hook_to_native comp
             end
             comp
@@ -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,34 +234,51 @@ 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`) } };
                             }
-
-            elsif key == 'dom'
+                          }
+                        }
+                `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"\
                       "If you want to capture the dom node in an instance variable use the `set` method.\n"\

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

@@ -2,30 +2,58 @@ module Hyperstack
   module Internal
     module Component
       class RenderingContext
+        class NotQuiet < Exception; end
         class << self
           attr_accessor :waiting_on_resources
 
+          def raise_if_not_quiet?
+            @raise_if_not_quiet
+          end
+
+          def raise_if_not_quiet=(x)
+            @raise_if_not_quiet = x
+          end
+
+          def quiet_test(component)
+            return unless component.waiting_on_resources && raise_if_not_quiet? #&& component.class != RescueMetaWrapper <- WHY  can't create a spec that this fails without this, but several fail with it.
+            raise NotQuiet.new("#{component} is waiting on resources")
+          end
+
+          def render_string(string)
+            @buffer ||= []
+            @buffer << string
+          end
+
           def render(name, *args, &block)
             was_outer_most = !@not_outer_most
             @not_outer_most = true
             remove_nodes_from_args(args)
-            @buffer ||= [] unless @buffer
+            @buffer ||= [] #unless @buffer
             if block
               element = build do
-                saved_waiting_on_resources = waiting_on_resources
+                saved_waiting_on_resources = nil #waiting_on_resources  what was the purpose of this its used below to or in with the current elements waiting_for_resources
                 self.waiting_on_resources = nil
-                run_child_block(name.nil?, &block)
+                run_child_block(&block)
                 if name
                   buffer = @buffer.dup
                   ReactWrapper.create_element(name, *args) { buffer }.tap do |element|
                     element.waiting_on_resources = saved_waiting_on_resources || !!buffer.detect { |e| e.waiting_on_resources if e.respond_to?(:waiting_on_resources) }
                     element.waiting_on_resources ||= waiting_on_resources if buffer.last.is_a?(String)
                   end
-                elsif @buffer.last.is_a? Hyperstack::Component::Element
-                  @buffer.last.tap { |element| element.waiting_on_resources ||= saved_waiting_on_resources }
                 else
-                  buffer_s = @buffer.last.to_s
-                  RenderingContext.render(:span) { buffer_s }.tap { |element| element.waiting_on_resources = saved_waiting_on_resources }
+                  buffer = @buffer.collect do |item|
+                    if item.is_a? Hyperstack::Component::Element
+                      item.waiting_on_resources ||= saved_waiting_on_resources
+                      item
+                    else
+                      RenderingContext.render(:span) { item.to_s }.tap { |element| element.waiting_on_resources = saved_waiting_on_resources }
+                    end
+                  end
+                  if buffer.length > 1
+                    buffer
+                  else
+                    buffer.first
+                  end
                 end
               end
             elsif name.is_a? Hyperstack::Component::Element
@@ -51,6 +79,7 @@ module Hyperstack
 
           def delete(element)
             @buffer.delete(element)
+            @last_deleted = element
             element
           end
           alias as_node delete
@@ -72,55 +101,74 @@ module Hyperstack
             end if args[0] && args[0].is_a?(Hash)
           end
 
-          # run_child_block gathers the element(s) generated by a child block.
+          # run_child_block yields to the child rendering block which will put any
+          # elements to be rendered into the current rendering buffer.
+          #
           # for example when rendering this div: div { "hello".span; "goodby".span }
           # two child Elements will be generated.
           #
-          # the final value of the block should either be
-          #   1 an object that responds to :acts_as_string?
-          #   2 a string,
-          #   3 an element that is NOT yet pushed on the rendering buffer
-          #   4 or the last element pushed on the buffer
+          # However the block itself will return a value, which in some cases should
+          # also added to the buffer:
           #
-          # in case 1 we render a span
-          # in case 2 we automatically push the string onto the buffer
-          # in case 3 we also push the Element onto the buffer IF the buffer is empty
-          # case 4 requires no special processing
+          # If the final value of the block is a
           #
-          # Once we have taken care of these special cases we do a check IF we are in an
-          # outer rendering scope.  In this case react only allows us to generate 1 Element
-          # so we insure that is the case, and also check to make sure that element in the buffer
-          # is the element returned
+          #   a hyper model dummy value that is being loaded, then wrap it in a span and add it to the buffer
+          #   a string (or if the buffer is empty any value), then add it to the buffer
+          #   an Element, then add it on the buffer unless it has been just deleted
+          #          #
+          # Note that the reason we don't always allow Strings to be automatically pushed is
+          # to avoid confusing results in situations like this:
+          #   DIV { collection.each { |item| SPAN { item } } }
+          # If we accepted any object to be rendered this would generate:
+          #   DIV { SPAN { collection[0] } SPAN { collection[n] } collection.to_s }
+          # which is probably not the desired output.  If it was you would just append to_s
+          # to the end of the expression, to force it to be added to the output buffer.
+          #
+          # However if the buffer is empty then it makes sense to automatically apply the `.to_s`
+          # to the value, and push it on the buffer, unless it is a falsy value or an array
 
-          def run_child_block(is_outer_scope)
+          def run_child_block
             result = yield
-            if result.respond_to?(:acts_as_string?) && result.acts_as_string?
-              # hyper-mesh DummyValues respond to acts_as_string, and must
+            check_for_component_return(result)
+            if dummy_value?(result)
+              # hyper-mesh DummyValues must
               # be converted to spans INSIDE the parent, otherwise the waiting_on_resources
               # flag will get set in the wrong context
               RenderingContext.render(:span) { result.to_s }
-            elsif result.is_a?(String) || (result.is_a?(Hyperstack::Component::Element) && @buffer.empty?)
-              @buffer << result
+            elsif result.is_a?(Hyperstack::Component::Element)
+              @buffer << result if @buffer.empty? unless @last_deleted == result
+            elsif pushable_string?(result)
+              @buffer << result.to_s
             end
-            raise_render_error(result) if is_outer_scope && @buffer != [result]
+            @last_deleted = nil
+          end
+
+          def check_for_component_return(result)
+            # check for a common error of saying (for example) DIV (without parens)
+            # which returns the DIV component class instead of a rendered DIV
+            return unless result.try :hyper_component?
+
+            Hyperstack::Component::IsomorphicHelpers.log(
+              "a component's render method returned the component class #{result}, did you mean to say #{result}()",
+              :warning
+            )
+          end
+
+          def dummy_value?(result)
+            result.respond_to?(:loading?) && result.loading?
           end
 
-          # heurestically raise a meaningful error based on the situation
-
-          def raise_render_error(result)
-            improper_render 'A different element was returned than was generated within the DSL.',
-                            'Possibly improper use of Element#delete.' if @buffer.count == 1
-            improper_render "Instead #{@buffer.count} elements were generated.",
-                            'Do you want to wrap your elements in a div?' if @buffer.count > 1
-            improper_render "Instead the component #{result} was returned.",
-                            "Did you mean #{result}()?" if result.try :hyper_component?
-            improper_render "Instead the #{result.class} #{result} was returned.",
-                            'You may need to convert this to a string.'
+          def pushable_string?(result)
+            # if the buffer is not empty we will only push on strings, and ignore anything else
+            return result.is_a?(String) unless @buffer.empty?
+
+            # if the buffer IS empty then we can push on anything except we avoid nil, false and arrays
+            # as these are almost never what you want to render, and if you do there are mechanisms
+            # to render them explicitly
+            result && result.respond_to?(:to_n) && !result.is_a?(Array)
           end
 
           def improper_render(message, solution)
-            raise "a component's render method must generate and return exactly 1 element or a string.\n"\
-                  "    #{message}  #{solution}"
           end
         end
       end
@@ -129,7 +177,7 @@ module Hyperstack
 end
 
 class Object
-  [:span, :td, :th, :while_loading].each do |tag|
+  %i[span td th].each do |tag|
     define_method(tag) do |*args, &block|
       args.unshift(tag)
       # legacy hyperloop allowed tags to be lower case as well so if self is a component
@@ -141,24 +189,26 @@ class Object
       # in the component.
       # If we fully deprecate lowercase tags, then this next line can go...
       return send(*args, &block) if respond_to?(:hyper_component?) && hyper_component?
+
       Hyperstack::Internal::Component::RenderingContext.render(*args) { to_s }
     end
   end
 
-
   def para(*args, &block)
     args.unshift(:p)
     # see above comment
     return send(*args, &block) if respond_to?(:hyper_component?) && hyper_component?
+
     Hyperstack::Internal::Component::RenderingContext.render(*args) { to_s }
   end
 
   def br
     # see above comment
     return send(:br) if respond_to?(:hyper_component?) && hyper_component?
-    Hyperstack::Internal::Component::RenderingContext.render(:span) do
-      Hyperstack::Internal::Component::RenderingContext.render(to_s)
-      Hyperstack::Internal::Component::RenderingContext.render(:br)
+    
+    Hyperstack::Internal::Component::RenderingContext.render(Hyperstack::Internal::Component::Tags::FRAGMENT) do
+      Hyperstack::Internal::Component::RenderingContext.render(Hyperstack::Internal::Component::Tags::FRAGMENT) { to_s }
+      Hyperstack::Internal::Component::RenderingContext.render(Hyperstack::Internal::Component::Tags::BR)
     end
   end