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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32f892af1c88068a155f6a7de78fe37ec32f157fe6e3e20d1a06db63501a43af
-  data.tar.gz: 031e39966cb44433d836a82e563236b985b59def309a9bfb39107ac1cc151e08
+  metadata.gz: 52da8498aa33bf215fdb7f9ca2f8ec64bbded0e27e1592fae1fccff1d9fca729
+  data.tar.gz: 8eea0d1b5409774add2597e14242e6ca4164db00b935c7c62986bedb67ad283a
 SHA512:
-  metadata.gz: 0ef39af06f446589c0b2ce1137d0403d0125c21657b857e7c3785921c800e9aaa1cb2975cd06e104de4bb45612bc510b0b3fe8ba0233dc68902b2d877bb1d430
-  data.tar.gz: b3a8f74fecb413e0fa82eb7ce97de80123b7e67fd9da9b3a5d9bff2d6a7f287f03aad6a8b62703cb776b14fa0233c602964ca20e56d9225a774be11e59bae9c8
+  metadata.gz: 3d1796ae2f6a12698dd7545022f79cb9770a8e915f30d167ab87c2e967eee51b6c3e3a1062876d3851163ea3a6170cf3ea058030cf81696dee4d9ac7bb83db4c
+  data.tar.gz: 2fcb00144eac41c15a77cc77cb59677b665685791aa138f89d1bd540648201604bd5ee5572b8abaa592ac3e5d2af995850c1bb7fc420e6cac0117b1564ed6973

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

@@ -8,45 +8,37 @@ Gem::Specification.new do |spec|
 
   spec.authors       = ['David Chang', 'Adam Jahn', 'Mitch VanDuyn', 'Jan Biedermann', 'Adam Creekroad']
   spec.email         = ['mitch@catprint.com']
-  spec.homepage      = 'http://ruby-hyperloop.org'
+  spec.homepage      = 'http://hyperstack.org'
   spec.summary       = 'Opal Ruby wrapper of React.js library.'
   spec.license       = 'MIT'
   spec.description   = 'Write React UI components in pure Ruby.'
-  # spec.metadata      = {
-  #   "homepage_uri" => 'http://ruby-hyperloop.org',
-  #   "source_code_uri" => 'https://github.com/ruby-hyperloop/hyper-component'
-  # }
-
   spec.files         = `git ls-files`.split("\n").reject { |f| f.match(%r{^(gemfiles|spec)/}) }
   spec.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   spec.require_paths = ['lib']
 
   spec.add_dependency 'hyper-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 'rubocop' #, '~> 0.51.0'
+  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
@@ -12,6 +12,7 @@ if RUBY_ENGINE == 'opal'
   require 'hyperstack/internal/callbacks'
   require 'hyperstack/internal/auto_unmount'
   require 'native'
+  require 'json'
   require 'hyperstack/state/observer'
   require 'hyperstack/internal/component/validator'
   require 'hyperstack/component/element'
@@ -22,14 +23,24 @@ 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/ext/component/time'
   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,13 +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_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`
@@ -93,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
 
@@ -112,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
@@ -124,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)
@@ -156,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