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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 42dc80deeb92bd2de37632efacae8b8d4a801c530d65937b7535018a2d3bc91a
-  data.tar.gz: 142a8df3b61e46f55d0d56766cddff7e734fc01b5f7f594ea6a57900bc4e9e4c
+  metadata.gz: 13c80256aa3fb40fd4026676823e8c3cb9045c54187b0150fc7819f739763230
+  data.tar.gz: 9813a2ea1cd8c7fd228060fcc0386375dbc59f1b7d90ca6f6eeeebd7f90ac574
 SHA512:
-  metadata.gz: 5306b0fd124bee54d7873b2b6a0f4d6713fd346e2efa3bf9ba9f0467df1348a919daf07aecedb55983e26f95076f8df67981774c3288d6eda3af346036fea791
-  data.tar.gz: ea657f7f9aae7884b5602f3be778452f9088bf9a34ca2afef10ce98e10428412a2e53d5dad6abf55a65f7edc2041460b598b5bd12c6422cb608a29423b8d12ee
+  metadata.gz: c44b8960612a69f1df270a146ef9bee5ee053aaf1084cf866d7f4593622c8d655afd0d6b089678ac9c15b01054b532f4f89a9a5e3a7cfbb7dab4800b40da7b58
+  data.tar.gz: bff7455afd5528f0fec49ab76efc591b5e3297c8e2158f1e20d6bb4b00ed60e0dbea86bf3f8b5baa3f0090c9b196e057619fc1ad82cdd726f1c8c472a382c19b

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.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'
+  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,18 +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,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,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

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('"', "'")
@@ -220,8 +225,6 @@ module Hyperstack
             end
           end
         else
-          require 'json'
-
           def isomorphic_method(name, &block)
             self.class.send(:define_method, name) do | *args |
               IsomorphicHelpers::IsomorphicProcCall.new(name, block, self, *args).result