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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 913095570e036cd245e669fabf4ff0a7fcdf4e08acf5742d405ea701a3d9c1e8
-  data.tar.gz: 5518a5a4f50529f4972cd26cd1fcc24cc90311800ca1d7703e39b9a353988edb
+  metadata.gz: 280f2800045d849e7cc7eb6e517673861a9a0dd15ea96a204bc246f7c35fdf96
+  data.tar.gz: 5f15dcac1988d4aa3443db720bb253e4b0f1cf36fa59884fafdf8d73ade1bbb5
 SHA512:
-  metadata.gz: 526f42bedbb8c7c16c6dda09a61795316aca083f4fdb6c468f0907c304debd94ccc6059c1c271b7140f94d274cef65310829b8f2b9e95727082cf8196975f166
-  data.tar.gz: 647b5d89b107e933e243eba3d584f1bb566be559b164d728312e10ba96080935286992ddf37c3d3056de763660911cf1bf754c150cbbaa4425f456125b39856b
+  metadata.gz: d56717e2ef07a3b4e94e3dbe933a1710167bf8a6a9318f2667e986d055d14af3f2a86daa426ef20bdd394352398dbdd6877615daf4b7a1454e7bea40d9014c04
+  data.tar.gz: 5d7920af6aa4843c8141c41b44ca7120d46be0be7a752336a7d48fb2cfc5aad76c985b2b5b3586391c4baed240b9c3d3655c59db3db07a6bdf0890c07e784614

data/.gitignore

@@ -41,3 +41,7 @@ spec/test_app/db
 # ignore IDE files
 .idea
 .vscode
+
+# ignore Gemfile.locks https://yehudakatz.com/2010/12/16/clarifying-the-roles-of-the-gemspec-and-gemfile/
+/spec/test_app/Gemfile.lock
+/Gemfile.lock

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.3.0' # see https://github.com/discourse/mini_racer/issues/92
-  spec.add_dependency 'mini_racer', '~> 0.1.15'
-  spec.add_dependency 'opal', '>= 0.11.0', '< 0.12.0'
   spec.add_dependency 'opal-activesupport', '~> 0.3.1'
   spec.add_dependency 'react-rails', '>= 2.4.0', '< 2.5.0'
 
-  spec.add_development_dependency 'bundler', '~> 1.16.0'
+  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'
+  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
@@ -22,14 +22,23 @@ if RUBY_ENGINE == 'opal'
   require 'hyperstack/component/event'
   require 'hyperstack/internal/component/rendering_context'
   require 'hyperstack/ext/component/object'
+  require 'hyperstack/ext/component/kernel'
   require 'hyperstack/ext/component/number'
   require 'hyperstack/ext/component/boolean'
+  require 'hyperstack/ext/component/array'
+  require 'hyperstack/ext/component/enumerable'
   require 'hyperstack/component/isomorphic_helpers'
   require 'hyperstack/component/react_api'
   require 'hyperstack/internal/component/top_level_rails_component'
+  require 'hyperstack/component/while_loading'
+  require 'hyperstack/component/free_render'
+  require 'hyperstack/internal/component/rescue_wrapper'
+  require 'hyperstack/internal/component/while_loading_wrapper'
+
   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,60 @@ 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_receive_props
-        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 :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`
+        %x{
+         Opal.__hyperstack_component_original_defn = Opal.defn
+         Opal.defn = function(klass, name, fn) {
+           #{
+             if `klass`.respond_to?(:hyper_component?) && !(`klass` < Hyperstack::Component::NativeLibrary)
+               if `name == '$render'` && !`klass`.allow_deprecated_render_definition?
+                 Hyperstack.deprecation_warning(`klass`, 'Do not directly define the render method. Use the render macro instead.')
+               elsif `name == '$__hyperstack_component_render'`
+                 `name = '$render'`
+               end
+             end
+            }
+           Opal.__hyperstack_component_original_defn(klass, name, fn)
+           }
+         }
+         nil
+       end
     end
 
     def self.mounted_components
@@ -75,13 +119,14 @@ module Hyperstack
     def component_did_mount
       observing(update_objects: true) do
         run_callback(:after_mount)
+        Hyperstack::Internal::Component::RenderingContext.quiet_test(self)
       end
     end
 
     def component_will_receive_props(next_props)
       # need to rethink how this works in opal-react, or if its actually that useful within the react.rb environment
       # for now we are just using it to clear processed_params
-      observing(immediate_update: true) { run_callback(:before_receive_props, next_props) }
+      observing(immediate_update: true) { run_callback(:before_new_params, next_props) }
       @__hyperstack_component_receiving_props = true
     end
 
@@ -94,7 +139,10 @@ module Hyperstack
     end
 
     def component_did_update(prev_props, prev_state)
-      observing(update_objects: true) { run_callback(:after_update, prev_props, prev_state) }
+      observing(update_objects: true) do
+        run_callback(:after_update, prev_props, prev_state)
+        Hyperstack::Internal::Component::RenderingContext.quiet_test(self)
+      end
     end
 
     def component_will_unmount
@@ -106,7 +154,9 @@ module Hyperstack
     end
 
     def component_did_catch(error, info)
-      observing { run_callback(:after_error, error, info) }
+      observing do
+        run_callback(:after_error, error, info)
+      end
     end
 
     def mutations(_objects)
@@ -138,9 +188,27 @@ module Hyperstack
       @__hyperstack_component_waiting_on_resources
     end
 
+    def __hyperstack_component_run_post_render_hooks(element)
+      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) { render || '' }
+        element = Hyperstack::Internal::Component::RenderingContext.render(nil) do
+          render || ""
+        end
         @__hyperstack_component_waiting_on_resources =
           element.waiting_on_resources if element.respond_to? :waiting_on_resources
         element

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,29 +15,89 @@ 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
 
-      # Attach event handlers.
+      def children
+        `#{@props}.children`
+      end
+
+      def _update_ref(x)
+        @_ref = x
+        @_child_element._update_ref(x) if @_child_element
+      end
+
+      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
+        `typeof #{ref}.$dom_node == 'function'` ? ref.dom_node : ref
+      end
+
+      # Attach event handlers. skip false, nil and blank event names
 
       def on(*event_names, &block)
-        event_names.each { |event_name| merge_event_prop!(event_name, &block) }
-        @native = `React.cloneElement(#{@native}, #{@properties.shallow_to_n})`
+        any_found = false
+        event_names.each do |event_name|
+          next unless event_name && event_name.strip != ''
+          merge_event_prop!(event_name, &block)
+          any_found = true
+        end
+        set_native_attributes(`React.cloneElement(#{self}, #{@properties.shallow_to_n})`) if any_found
         self
       end
 
@@ -45,14 +105,14 @@ module Hyperstack
       # Used for elements that are not yet in DOM, i.e. they are provided as children
       # or they have been explicitly removed from the rendering context using the delete method.
 
-      def render(props = {}, &new_block)
+      def render(*props)
         if props.empty?
           Hyperstack::Internal::Component::RenderingContext.render(self)
         else
-          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(props)
-          Hyperstack::Internal::Component::RenderingContext.render(
-            Element.new(`React.cloneElement(#{@native}, #{props.shallow_to_n})`,
-                        type, @properties.merge(props), block)
+          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(element_type, @properties, *props)
+          @_child_element = Hyperstack::Internal::Component::RenderingContext.render(
+            Element.new(`React.cloneElement(#{self}, #{props.shallow_to_n})`,
+                        element_type, props, block)
           )
         end
       end
@@ -60,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
 
@@ -89,26 +150,37 @@ 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
         end
       end
 
-      def merge_built_in_event_prop!(prop_name)
+      def merge_built_in_event_prop!(prop_name, &block)
         @properties.merge!(
           prop_name => %x{
             function(){
               var react_event = arguments[0];
+              if (arguments.length == 0 || !react_event.nativeEvent) {
+                return #{yield(*Array(`arguments`))}
+              }
               var all_args;
               var other_args;
               if (arguments.length > 1) {
                 all_args = Array.prototype.slice.call(arguments);
                 other_args = all_args.slice(1, arguments.length);
-                return #{yield(Event.new(`react_event`), *(`other_args`))};
+                return #{
+                  Internal::State::Mapper.ignore_bulk_updates(
+                    Event.new(`react_event`), *(`other_args`), &block
+                  )
+                };
               } else {
-                return #{yield(Event.new(`react_event`))};
+                return #{
+                  Internal::State::Mapper.ignore_bulk_updates(
+                    Event.new(`react_event`), &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/free_render.rb

@@ -0,0 +1,21 @@
+module Hyperstack
+  module Component
+    module FreeRender
+      def self.included(base)
+        base.instance_eval do
+          alias :hyperstack_component_original_meth_missing method_missing
+          def method_missing(name, *args, &block)
+            if const_defined?(name) &&
+               (klass = const_get(name)) &&
+               ((klass.is_a?(Class) && klass.method_defined?(:render)) ||
+                 Hyperstack::Internal::Component::Tags::HTML_TAGS.include?(klass))
+              render(klass, *args, &block)
+            else
+              hyperstack_component_original_meth_missing(name, *args, &block)
+            end
+          end
+        end
+      end
+    end
+  end
+end