hyper-component 1.0.alpha1.5 → 1.0.alpha1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5eb3f7c53a31ed9f6708f9fd1251f3ed52f7d54e5894145abaaf4ac4e5ac7fce
-  data.tar.gz: b95ea7df69882114a1a55f772911ba2b609221bde04df9e629e1278c0e71ea73
+  metadata.gz: 280f2800045d849e7cc7eb6e517673861a9a0dd15ea96a204bc246f7c35fdf96
+  data.tar.gz: 5f15dcac1988d4aa3443db720bb253e4b0f1cf36fa59884fafdf8d73ade1bbb5
 SHA512:
-  metadata.gz: b7022103f15e46d7251addacac7ca755bb2cc2e7d52ae9ec8ebcd9fbb24ada6db90e77d3d689ad20a058a60e84192f00ea88f5d99065c2b86420187f2a0a2057
-  data.tar.gz: 44d0acecd8dc27123a35d0db8fa32f9cbdbe6715c523661a618114ad157891dfec8ebc226b6eff70e3a2a562271e3144d477e16f9110a8a274058edd1fb188cf
+  metadata.gz: d56717e2ef07a3b4e94e3dbe933a1710167bf8a6a9318f2667e986d055d14af3f2a86daa426ef20bdd394352398dbdd6877615daf4b7a1454e7bea40d9014c04
+  data.tar.gz: 5d7920af6aa4843c8141c41b44ca7120d46be0be7a752336a7d48fb2cfc5aad76c985b2b5b3586391c4baed240b9c3d3655c59db3db07a6bdf0890c07e784614

data/Gemfile

@@ -4,5 +4,10 @@ gem 'hyper-spec',        path: '../hyper-spec'
 gem 'hyperstack-config', path: '../hyperstack-config'
 gem 'hyper-store',       path: '../hyper-store'
 gem 'hyper-state',       path: '../hyper-state'
+unless ENV['OPAL_VERSION']&.match("0.11")
+  gem 'opal-browser', git: 'https://github.com/opal/opal-browser'
+end
+gem 'hyper-trace',       path: '../hyper-trace'
+
 #gem 'puma', '~> 3.11.0' # As of adding, version 3.12.0 isn't working so we are locking
 gemspec

data/hyper-component.gemspec

@@ -23,30 +23,27 @@ Gem::Specification.new do |spec|
 
   spec.add_dependency 'hyper-state', Hyperstack::Component::VERSION
   spec.add_dependency 'hyperstack-config', Hyperstack::Component::VERSION
-  spec.add_dependency 'libv8', '~> 6.7.0'
-  spec.add_dependency 'mini_racer', '~> 0.2.4'
-  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 'bundler', ['>= 1.17.3', '< 2.1']
+  spec.add_development_dependency 'bundler'
   spec.add_development_dependency 'chromedriver-helper'
   spec.add_development_dependency 'hyper-spec', Hyperstack::Component::VERSION
   spec.add_development_dependency 'jquery-rails'
   spec.add_development_dependency 'listen'
   spec.add_development_dependency 'mime-types'
+  spec.add_development_dependency 'mini_racer'
   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 'opal-rails', '>= 0.9.4', '< 2.0'
   spec.add_development_dependency 'pry-rescue'
+  spec.add_development_dependency 'pry-stack_explorer'
   spec.add_development_dependency 'puma'
-  spec.add_development_dependency 'rails', '>= 4.0.0'
+  spec.add_development_dependency 'rails', ENV['RAILS_VERSION'] || '>= 5.0.0', '< 7.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', '~> 1.3.6' # see https://github.com/rails/rails/issues/35153
+  spec.add_development_dependency 'sqlite3', '~> 1.4.2'
   spec.add_development_dependency 'timecop', '~> 0.8.1'
 end

data/lib/hyper-component.rb

@@ -1,9 +1,9 @@
 require 'hyperstack/internal/component'
 
-Hyperstack.import    'hyper-state'
 Hyperstack.js_import 'react/react-source-browser', client_only: true, defines: %w[ReactDOM React]
 Hyperstack.js_import 'react/react-source-server', server_only: true, defines: 'React'
 Hyperstack.import    'browser/delay', client_only: true
+Hyperstack.import    'browser/interval', client_only: true
 Hyperstack.js_import 'react_ujs', defines: 'ReactRailsUJS'
 Hyperstack.import    'hyper-component'  # TODO: confirm this does not break anything.  Added while converting hyperloop->hyperstack
 Hyperstack.import    'hyperstack/component/auto-import'  # TODO: confirm we can cancel the import
@@ -38,6 +38,7 @@ if RUBY_ENGINE == 'opal'
   require 'hyperstack/component/version'
 else
   require 'opal'
+  require 'hyper-state'
   require 'opal-activesupport'
   require 'hyperstack/component/version'
   require 'hyperstack/internal/component/rails'

data/lib/hyperstack/component.rb

@@ -1,7 +1,6 @@
 require 'hyperstack/ext/component/string'
 require 'hyperstack/ext/component/hash'
 require 'active_support/core_ext/class/attribute'
-require 'hyperstack/internal/auto_unmount'
 require 'hyperstack/internal/component/rendering_context'
 require 'hyperstack/internal/component'
 require 'hyperstack/internal/component/instance_methods'
@@ -19,15 +18,40 @@ module Hyperstack
       base.include(Hyperstack::Internal::Component::ShouldComponentUpdate)
       base.class_eval do
         class_attribute :initial_state
-        define_callback :before_mount
+
+        method_args_deprecation_check = lambda do |name, sself, proc, *args|
+          if proc.arity.zero?
+            args = []
+          else
+            deprecation_warning "In the future #{name} callbacks will not receive any parameters."
+          end
+          sself.instance_exec(*args, &proc)
+          args
+        end
+
+        define_callback :before_mount, before_call_hook: method_args_deprecation_check
         define_callback :after_mount
-        define_callback :before_new_params
-        define_callback :before_update
+        define_callback(
+          :before_new_params,
+          after_define_hook: lambda do |klass|
+            klass.deprecation_warning "`before_new_params` has been deprecated.  The base "\
+                                      "method componentWillReceiveProps is deprecated in React without replacement"
+          end
+        )
+        define_callback(:before_update, before_call_hook: method_args_deprecation_check)
         define_callback :after_update
-        define_callback :__hyperstack_component_after_render_hook
-        define_callback :__hyperstack_component_rescue_hook
-        #define_callback :before_unmount defined already by Async module
-        define_callback(:after_error) { Hyperstack::Internal::Component::ReactWrapper.add_after_error_hook(base) }
+        define_callback(
+          :__hyperstack_component_after_render_hook,
+          before_call_hook: ->(_, sself, proc, *args) { [*sself.instance_exec(*args, &proc)] }
+        )
+        define_callback(
+          :__hyperstack_component_rescue_hook,
+          before_call_hook: ->(_, sself, proc, *args) { sself.instance_exec(*args, &proc) }
+        )
+        define_callback(
+          :after_error,
+          after_define_hook: ->(klass) { Hyperstack::Internal::Component::ReactWrapper.add_after_error_hook(klass) }
+        )
       end
       base.extend(Hyperstack::Internal::Component::ClassMethods)
       unless `Opal.__hyperstack_component_original_defn`
@@ -165,13 +189,25 @@ module Hyperstack
     end
 
     def __hyperstack_component_run_post_render_hooks(element)
-      run_callback(:__hyperstack_component_after_render_hook, element) { |*args| args }.first
+      run_callback(:__hyperstack_component_after_render_hook, element).first
     end
 
+    def _run_before_render_callbacks
+      # eventually add before_update if @__component_mounted
+      # but that will not perfectly match the current React behavior.
+      # However that behavior is deprecated, and so once we have
+      # given a chance for the code to be updated we can switch this over
+      # and switch the deprecation notice to an error.
+      component_will_mount unless @__component_mounted
+      @__component_mounted = true
+    end
+
+
     def _render_wrapper
+      _run_before_render_callbacks
       observing(rendering: true) do
         element = Hyperstack::Internal::Component::RenderingContext.render(nil) do
-          render || ''
+          render || ""
         end
         @__hyperstack_component_waiting_on_resources =
           element.waiting_on_resources if element.respond_to? :waiting_on_resources

data/lib/hyperstack/component/children.rb

@@ -22,7 +22,7 @@ module Hyperstack
         %x{
           React.Children.forEach(#{@children}, function(context){
             #{
-              element = Element.new(`context`)
+              element = Element.new(`context`, :wrap_child)
               block.call(element)
               collection << element
             }

data/lib/hyperstack/component/element.rb

@@ -15,33 +15,73 @@ module Hyperstack
     # by using method missing
     #
     class Element
-      include Native
 
-      alias_native :element_type, :type
-      alias_native :props, :props
+#       $$typeof: Symbol(react.element)
+#       key: null
+#       props: {}
+#       ref: null
+#       type: "div"
+# _     _owner: null
 
-      attr_reader :type
+      attr_reader   :type
+
+      attr_reader :element_type # change this so name does not conflict - change to element type
       attr_reader :properties
       attr_reader :block
+      attr_reader :to_n
 
       attr_accessor :waiting_on_resources
 
-      def initialize(native_element, type = nil, properties = {}, block = nil)
-        @type = type
+      def set_native_attributes(native_element)
+        @key =    `native_element.key`
+        @props =  `native_element.props`
+        @ref =    `native_element.ref`
+        @type =   `native_element.type`
+        @_owner = `native_element._owner`
+        @_props_as_hash = Hash.new(@props)
+      end
+
+      def props
+        @_props_as_hash
+      end
+
+      def convert_string(native_element, element_type, props, block)
+        return native_element unless `native_element['$is_a?']`
+        return native_element unless native_element.is_a? String
+        raise "Internal Error Element.new called with string, but non-nil props or block" if !props.empty? || block
+
+        if element_type == :wrap_child
+          `React.createElement(React.Fragment, null, [native_element])`
+        else
+          `React.createElement(native_element, null)`
+        end
+      end
+
+      def initialize(native_element, element_type = nil, properties = {}, block = nil)
+
+        native_element = convert_string(native_element, element_type, properties, block)
+        @element_type = element_type unless element_type == :wrap_child
         @properties = (`typeof #{properties} === 'undefined'` ? nil : properties) || {}
         @block = block
-        @native = native_element
+        `#{self}.$$typeof = native_element.$$typeof`
+        @to_n = self
+        set_native_attributes(native_element)
+      rescue Exception
+      end
+
+      def children
+        `#{@props}.children`
       end
 
       def _update_ref(x)
-        @ref = x
+        @_ref = x
         @_child_element._update_ref(x) if @_child_element
       end
 
-      def ref
-        return @ref if @ref
-        raise("The instance of #{self.type} has not been mounted yet") if properties[:ref]
-        raise("Attempt to get a ref on #{self.type} which is a static component.")
+      def ref # this will not conflict with React's on ref attribute okay because its $ref!!!
+        return @_ref if @_ref
+        raise("The instance of #{self.element_type} has not been mounted yet") if properties[:ref]
+        raise("Attempt to get a ref on #{self.element_type} which is a static component.")
       end
 
       def dom_node
@@ -57,7 +97,7 @@ module Hyperstack
           merge_event_prop!(event_name, &block)
           any_found = true
         end
-        @native = `React.cloneElement(#{@native}, #{@properties.shallow_to_n})` if any_found
+        set_native_attributes(`React.cloneElement(#{self}, #{@properties.shallow_to_n})`) if any_found
         self
       end
 
@@ -69,10 +109,10 @@ module Hyperstack
         if props.empty?
           Hyperstack::Internal::Component::RenderingContext.render(self)
         else
-          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(@type, @properties, *props)
+          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(element_type, @properties, *props)
           @_child_element = Hyperstack::Internal::Component::RenderingContext.render(
-            Element.new(`React.cloneElement(#{@native}, #{props.shallow_to_n})`,
-                        type, props, block)
+            Element.new(`React.cloneElement(#{self}, #{props.shallow_to_n})`,
+                        element_type, props, block)
           )
         end
       end
@@ -80,11 +120,12 @@ module Hyperstack
       # Delete (remove) element from rendering context, the element may later be added back in
       # using the render method.
 
-      def delete
+      def ~
         Hyperstack::Internal::Component::RenderingContext.delete(self)
       end
       # Deprecated version of delete method
-      alias as_node delete
+      alias as_node ~
+      alias delete ~
 
       private
 
@@ -109,7 +150,7 @@ module Hyperstack
           merge_built_in_event_prop! name, &block
         elsif event_name == :enter
           merge_built_in_event_prop!('onKeyDown') { |evt| yield(evt) if evt.key_code == 13 }
-        elsif @type.instance_variable_get('@native_import')
+        elsif element_type.instance_variable_get('@native_import')
           merge_component_event_prop! name, &block
         else
           merge_component_event_prop! "on_#{event_name}", &block

data/lib/hyperstack/component/event.rb

@@ -1,7 +1,7 @@
 module Hyperstack
   module Component
     class Event
-      include Native
+      include Native::Wrapper
       alias_native :bubbles, :bubbles
       alias_native :cancelable, :cancelable
       alias_native :current_target, :currentTarget

data/lib/hyperstack/component/isomorphic_helpers.rb

@@ -18,16 +18,22 @@ module Hyperstack
         def self.load_context(unique_id = nil, name = nil)
           # can be called on the client to force re-initialization for testing purposes
           if !unique_id || !@context || @context.unique_id != unique_id
-            if on_opal_server?
-              `console.history = []` rescue nil
-              message = "************************ React Prerendering Context Initialized #{name} ***********************"
-            else
-              message = "************************ React Browser Context Initialized ****************************"
-            end
+            message =
+              if on_opal_server?
+                `console.history = []` rescue nil
+                "************************ React Prerendering Context Initialized #{name} ***********************"
+              else
+                '************************ React Browser Context Initialized ****************************'
+              end
+
             log(message)
+
             @context = Context.new(unique_id)
           end
-          @context
+
+          # True is returned here because this method is evaluated by MiniRacer,
+          #   and can cause TypeError: Converting circular structure to JSON to raise
+          true
         end
       end
 
@@ -139,7 +145,6 @@ module Hyperstack
 
         def send_to_opal(method_name, *args)
           return unless @ctx
-          args = [1] if args.length == 0
           Hyperstack::Internal::Component::Rails::ComponentLoader.new(@ctx).load!
           method_args = args.collect do |arg|
             quarg = "#{arg}".tr('"', "'")

data/lib/hyperstack/component/version.rb

@@ -1,5 +1,5 @@
 module Hyperstack
   module Component
-    VERSION = '1.0.alpha1.5' # '1.0.alpha1.5'
+    VERSION = '1.0.alpha1.6' # '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/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

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

@@ -28,7 +28,7 @@ module Hyperstack
             self,
             Hyperstack::Internal::Component::RenderingContext.build do
               Hyperstack::Internal::Component::RenderingContext.render(
-                type, @properties, args, class: haml_class_name(class_name), &new_block
+                element_type, @properties, args, class: haml_class_name(class_name), &new_block
               )
             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

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

@@ -19,7 +19,7 @@ module Hyperstack
         @@component_classes = {}
 
         def self.stateless?(ncc)
-          `typeof #{ncc} === 'function' && !(#{ncc}.prototype && #{ncc}.prototype.isReactComponent)`
+          `typeof #{ncc} === 'symbol' || (typeof #{ncc} === 'function' && !(#{ncc}.prototype && #{ncc}.prototype.isReactComponent))`
         end
 
         def self.import_native_component(opal_class, native_class)
@@ -30,6 +30,7 @@ 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` ||
@@ -43,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
 
@@ -64,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

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

@@ -19,27 +19,41 @@ module Hyperstack
             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 = 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
@@ -65,6 +79,7 @@ module Hyperstack
 
           def delete(element)
             @buffer.delete(element)
+            @last_deleted = element
             element
           end
           alias as_node delete
@@ -86,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:
+          #
+          # If the final value of the block is a
           #
-          # 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
+          #   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.
           #
-          # 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
+          # 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
 
-          # 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 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
+
+          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
@@ -143,7 +177,7 @@ module Hyperstack
 end
 
 class Object
-  [:span, :td, :th].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
@@ -155,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
 

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

@@ -27,7 +27,7 @@ module Hyperstack
 
         after_error do |error, info|
           args = RescueWrapper.after_error_args || [error, info]
-          found, * = @Child.run_callback(:__hyperstack_component_rescue_hook, found, *args) { |a| a }
+          found, * = @Child.run_callback(:__hyperstack_component_rescue_hook, found, *args)
           unless found
             RescueWrapper.after_error_args = args
             raise error

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

@@ -32,6 +32,14 @@ module Hyperstack
           const_set tag.upcase, tag
         end
 
+        const_set "FRAGMENT", (
+          Class.new do
+            include Hyperstack::Component
+            render {}
+            Hyperstack::Internal::Component::ReactWrapper.import_native_component(self, `React.Fragment`)
+          end
+        )
+
         # this is used for haml style (i.e. DIV.foo.bar) class tags which is deprecated
         def self.html_tag_class_for(tag)
           downcased_tag = tag.downcase
@@ -85,6 +93,7 @@ module Hyperstack
 
         def lookup_const(name)
           return nil unless name =~ /^[A-Z]/
+          return Hyperstack::Internal::Component::Tags::FRAGMENT if name == "FRAGMENT"
           scopes = self.class.name.to_s.split('::').inject([Object]) do |nesting, next_const|
             nesting + [nesting.last.const_get(next_const)]
           end.reverse

data/lib/react/react-source.rb

@@ -11,7 +11,7 @@ if RUBY_ENGINE == 'opal'
 else
   require "hyperstack/internal/component"
   require "react/rails/asset_variant"
-  variant = Hyperstack.env.production? ? 'production' : 'development'
-  react_directory = React::Rails::AssetVariant.new({environment: variant}).react_directory
+  variant = Hyperstack.env.production? ? :production : :development
+  react_directory = React::Rails::AssetVariant.new({ variant: variant }).react_directory
   Opal.append_path react_directory.untaint
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hyper-component
 version: !ruby/object:Gem::Version
-  version: 1.0.alpha1.5
+  version: 1.0.alpha1.6
 platform: ruby
 authors:
 - David Chang
@@ -12,7 +12,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-19 00:00:00.000000000 Z
+date: 2021-03-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: hyper-state
@@ -20,76 +20,28 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.0.alpha1.5
+        version: 1.0.alpha1.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.0.alpha1.5
+        version: 1.0.alpha1.6
 - !ruby/object:Gem::Dependency
   name: hyperstack-config
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.0.alpha1.5
+        version: 1.0.alpha1.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.0.alpha1.5
-- !ruby/object:Gem::Dependency
-  name: libv8
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 6.7.0
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 6.7.0
-- !ruby/object:Gem::Dependency
-  name: mini_racer
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.2.4
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.2.4
-- !ruby/object:Gem::Dependency
-  name: opal
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 0.11.0
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 0.12.0
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 0.11.0
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 0.12.0
+        version: 1.0.alpha1.6
 - !ruby/object:Gem::Dependency
   name: opal-activesupport
   requirement: !ruby/object:Gem::Requirement
@@ -130,20 +82,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.17.3
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.17.3
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: chromedriver-helper
   requirement: !ruby/object:Gem::Requirement
@@ -164,14 +110,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.0.alpha1.5
+        version: 1.0.alpha1.6
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.0.alpha1.5
+        version: 1.0.alpha1.6
 - !ruby/object:Gem::Dependency
   name: jquery-rails
   requirement: !ruby/object:Gem::Requirement
@@ -215,7 +161,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: nokogiri
+  name: mini_racer
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -229,7 +175,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: opal-jquery
+  name: nokogiri
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -243,35 +189,41 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: opal-rails
+  name: opal-jquery
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.9.4
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.9.4
+        version: '0'
 - !ruby/object:Gem::Dependency
-  name: opal-rspec
+  name: opal-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.9.4
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '2.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.9.4
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '2.0'
 - !ruby/object:Gem::Dependency
-  name: pry
+  name: pry-rescue
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -285,7 +237,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: pry-rescue
+  name: pry-stack_explorer
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -318,14 +270,20 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 4.0.0
+        version: 5.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '7.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 4.0.0
+        version: 5.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '7.0'
 - !ruby/object:Gem::Dependency
   name: rails-controller-testing
   requirement: !ruby/object:Gem::Requirement
@@ -388,14 +346,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.3.6
+        version: 1.4.2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.3.6
+        version: 1.4.2
 - !ruby/object:Gem::Dependency
   name: timecop
   requirement: !ruby/object:Gem::Requirement
@@ -493,7 +451,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.0.4
+rubygems_version: 3.0.8
 signing_key: 
 specification_version: 4
 summary: Opal Ruby wrapper of React.js library.