isomorfeus-react 16.10.5 → 16.10.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2286c84dc8c51cc28fd6940b07a021109025122954b2784c2cb19e51da0b648
-  data.tar.gz: 778d14cf5a6369e19ef96fad94126df299a15585c95ce346af959579bc3c8c90
+  metadata.gz: afd9951ac47f6c2ed3fea7f8135ba03f63c596c52c3f795901fa974d9c36eb2e
+  data.tar.gz: 80b4226998ea64b6d12ee0a56959d77ca96e78eebb8f553375a7785d8490a800
 SHA512:
-  metadata.gz: 8471a64f958f5f4eea8d77fcf0cc9f9b746de2ce8c6b2c088ca17dfb760498d286fad0dc8408cd7a7b8c492102b9e1a46ec9bf3361317eb474a61ad0ac9466ec
-  data.tar.gz: fc964591e3c95ae164ba3a910bbc966612f3fc02ac29774e16079b6df22a17b8b9c4a332cc4bd9906ee40f696f2cbdf4668fd392f95c5ee913a69a0cf7c0421e
+  metadata.gz: a3f3edfbf9c1a600504dd1125721da402dd8ba4bbe56d026a0b62083425b416eb3de66882f46afaf59b07c8c81ae60b929e34d12062698e001c6248324136fab
+  data.tar.gz: 94d226fca0ad5fdf2699d8dfbbad78777248877ae5d665831b395cfbf12008edbb897e7d0d0b2f4810fd35da95ab9f862a517571db8ad8422dd8f64c29542475

data/README.md

@@ -22,7 +22,7 @@ Component Types:
 - [Function and Memo Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/function_component.md)
 - [Lucid App, Lucid Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_component.md)
 - [LucidMaterial App, LucidMaterial Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_material_component.md) - support for [MaterialUI](https://material-ui.com)
-- [React Javascript Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/javascript_component.md)
+- [React Javascript Components and React Elements](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/javascript_component.md)
 
 Which component to use?
 - Usually LucidApp and LucidComponent along with some imported javascript components.
@@ -61,3 +61,8 @@ https://github.com/facebook/react-devtools
 - clone repo
 - `bundle install`
 - `rake`
+
+Implementations for the [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark):
+
+- [using LucidComponent](https://github.com/janbiedermann/js-framework-benchmark/tree/master/frameworks/keyed/isomorfeus-lucid)
+- [using React::Component](https://github.com/janbiedermann/js-framework-benchmark/tree/master/frameworks/keyed/isomorfeus-react)

data/lib/isomorfeus-react.rb

@@ -71,7 +71,6 @@ if RUBY_ENGINE == 'opal'
   require 'react/component/location'
   require 'react/component/history'
   require 'react/component/resolution'
-  require 'react/component/should_component_update'
   require 'react/component/event_handler'
   require 'react/component/styles'
   require 'react/component/mixin'

data/lib/lucid_app/mixin.rb

@@ -4,7 +4,6 @@ module LucidApp
       base.include(::Native::Wrapper)
       base.extend(::LucidApp::NativeComponentConstructor)
       base.extend(::LucidPropDeclaration::Mixin)
-      base.extend(::React::Component::ShouldComponentUpdate)
       base.extend(::LucidComponent::EventHandler)
       base.include(::React::Component::Elements)
       base.include(::React::Component::API)

data/lib/lucid_component/native_component_constructor.rb

@@ -57,14 +57,6 @@ module LucidComponent
             return this.context;
           }
           shouldComponentUpdate(next_props, next_state) {
-            var next_props_keys = Object.keys(next_props);
-            var this_props_keys = Object.keys(this.props);
-            if (next_props_keys.length !== this_props_keys.length) { return true; }
-
-            var next_state_keys = Object.keys(next_state);
-            var this_state_keys = Object.keys(this.state);
-            if (next_state_keys.length !== this_state_keys.length) { return true; }
-
             for (var property in next_props) {
               if (next_props.hasOwnProperty(property)) {
                 if (!this.props.hasOwnProperty(property)) { return true; };

data/lib/lucid_material/app/mixin.rb

@@ -5,7 +5,6 @@ module LucidMaterial
         base.include(::Native::Wrapper)
         base.extend(::LucidMaterial::App::NativeComponentConstructor)
         base.extend(::LucidPropDeclaration::Mixin)
-        base.extend(::React::Component::ShouldComponentUpdate)
         base.extend(::LucidComponent::EventHandler)
         base.include(::React::Component::Elements)
         base.include(::React::Component::API)

data/lib/lucid_material/component/native_component_constructor.rb

@@ -58,14 +58,6 @@ module LucidMaterial
               return this.context;
             }
             shouldComponentUpdate(next_props, next_state) {
-              var next_props_keys = Object.keys(next_props);
-              var this_props_keys = Object.keys(this.props);
-              if (next_props_keys.length !== this_props_keys.length) { return true; }
-
-              var next_state_keys = Object.keys(next_state);
-              var this_state_keys = Object.keys(this.state);
-              if (next_state_keys.length !== this_state_keys.length) { return true; }
-
               for (var property in next_props) {
                 if (next_props.hasOwnProperty(property)) {
                   if (!this.props.hasOwnProperty(property)) { return true; };

data/lib/react.rb

@@ -17,7 +17,6 @@ module React
     self.lower_camelize = function(snake_cased_word) {
       var parts = snake_cased_word.split('_');
       var res = parts[0];
-      if (parts.length === 1) { return res; }
       for (var i = 1; i < parts.length; i++) {
             res += parts[i][0].toUpperCase() + parts[i].slice(1);
       }
@@ -34,24 +33,25 @@ module React
         var result = {};
         var keys = ruby_style_props.$keys();
         var keys_length = keys.length;
+        let key;
         for (var i = 0; i < keys_length; i++) {
-          if (keys[i].startsWith("on_")) {
-            var handler = ruby_style_props['$[]'](keys[i]);
+          key = keys[i];
+          if (key[0] === 'o' && key[1] === 'n' && key[2] === '_') {
+            var handler = ruby_style_props['$[]'](key);
             if (typeof handler === "function") {
-              result[Opal.React.lower_camelize(keys[i])] = handler;
+              result[Opal.React.lower_camelize(key)] = handler;
             } else {
               var active_component = Opal.React.active_component();
-              result[Opal.React.lower_camelize(keys[i])] = active_component[handler];
+              result[Opal.React.lower_camelize(key)] = active_component[handler];
             }
-          } else if (keys[i].startsWith("aria_")) {
-            result[keys[i].replace("_", "-")] = ruby_style_props['$[]'](keys[i]);
-          } else if (keys[i] === "style") {
-            var val = ruby_style_props['$[]'](keys[i]);
+          } else if (key[0] === 'a' && key.startsWith("aria_")) {
+            result[key.replace("_", "-")] = ruby_style_props['$[]'](key);
+          } else if (keys === "style") {
+            var val = ruby_style_props['$[]'](key);
             if (typeof val.$$is_hash !== "undefined") { val = val.$to_n() }
             result["style"] = val;
           } else {
-            let key = keys[i];
-            result[Opal.React.lower_camelize(keys[i])] = ruby_style_props['$[]'](keys[i]);
+            result[key.indexOf('_') > 0 ? Opal.React.lower_camelize(key) : key] = ruby_style_props['$[]'](key);
           }
         }
         return result;

data/lib/react/component/api.rb

@@ -47,6 +47,10 @@ module React
           def render(&block)
             `base.render_block = block`
           end
+
+          def should_component_update?(&block)
+            `base.should_component_update_block = block`
+          end
         end
       end
 

data/lib/react/component/mixin.rb

@@ -5,7 +5,6 @@ module React
         base.include(::Native::Wrapper)
         base.extend(::React::Component::NativeComponentConstructor)
         base.extend(::LucidPropDeclaration::Mixin)
-        base.extend(::React::Component::ShouldComponentUpdate)
         base.extend(::React::Component::EventHandler)
         base.include(::React::Component::Elements)
         base.include(::React::Component::API)

data/lib/react/component/native_component_constructor.rb

@@ -48,40 +48,31 @@ module React
               return Opal.React.render_buffer.pop();
             }
             shouldComponentUpdate(next_props, next_state) {
-              if (base.has_custom_should_component_update) {
-                return this.__ruby_instance["$should_component_update"](#{(Hash.new(next_props))}, #{Hash.new(next_state)});
-              } else {
-                var next_props_keys = Object.keys(next_props);
-                var this_props_keys = Object.keys(this.props);
-                if (next_props_keys.length !== this_props_keys.length) { return true; }
-
-                var next_state_keys = Object.keys(next_state);
-                var this_state_keys = Object.keys(this.state);
-                if (next_state_keys.length !== this_state_keys.length) { return true; }
-
-                for (var property in next_props) {
-                  if (next_props.hasOwnProperty(property)) {
-                    if (!this.props.hasOwnProperty(property)) { return true; }
-                    if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
-                    else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
-                             typeof next_props[property]['$!='] !== "undefined" &&
-                             typeof this.props[property] !== "undefined" && this.props[property] !== null &&
-                             typeof this.props[property]['$!='] !== "undefined") {
-                      if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
-                    } else if (next_props[property] !== this.props[property]) { return true; }
-                  }
+              if (base.should_component_update_block) {
+                return #{!!`this.__ruby_instance`.instance_exec(React::Component::Props.new(`{props: next_props}`), React::Component::State.new(`{state: next_state }`), &`base.should_component_update_block`)};
+              }
+              for (var property in next_props) {
+                if (next_props.hasOwnProperty(property)) {
+                  if (!this.props.hasOwnProperty(property)) { return true; }
+                  if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
+                  else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
+                           typeof next_props[property]['$!='] !== "undefined" &&
+                           typeof this.props[property] !== "undefined" && this.props[property] !== null &&
+                           typeof this.props[property]['$!='] !== "undefined") {
+                    if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
+                  } else if (next_props[property] !== this.props[property]) { return true; }
                 }
-                for (var property in next_state) {
-                  if (next_state.hasOwnProperty(property)) {
-                    if (!this.state.hasOwnProperty(property)) { return true; };
-                    if (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
-                        this.state[property] !== null && typeof this.state[property]['$!='] !== "undefined") {
-                      if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
-                    } else if (next_state[property] !== this.state[property]) { return true }
-                  }
+              }
+              for (var property in next_state) {
+                if (next_state.hasOwnProperty(property)) {
+                  if (!this.state.hasOwnProperty(property)) { return true; };
+                  if (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
+                      this.state[property] !== null && typeof this.state[property]['$!='] !== "undefined") {
+                    if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
+                  } else if (next_state[property] !== this.state[property]) { return true }
                 }
-                return false;
               }
+              return false;
             }
             validateProp(props, propName, componentName) {
               try { base.$validate_prop(propName, props[propName]) }

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.10.5'
+  VERSION = '16.10.6'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.10.5
+  version: 16.10.6
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-10-07 00:00:00.000000000 Z
+date: 2019-10-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: oj
@@ -217,7 +217,6 @@ files:
 - lib/react/component/native_component_constructor.rb
 - lib/react/component/props.rb
 - lib/react/component/resolution.rb
-- lib/react/component/should_component_update.rb
 - lib/react/component/state.rb
 - lib/react/component/styles.rb
 - lib/react/component/unsafe_api.rb

data/lib/react/component/should_component_update.rb

@@ -1,14 +0,0 @@
-module React
-  module Component
-    module ShouldComponentUpdate
-      def self.extended(base)
-        base.define_singleton_method(:should_component_update?) do |&block|
-          `base.has_custom_should_component_update = true`
-          define_method(:should_component_update) do |next_props, next_state|
-            !!block.call(Hash.new(next_props), Hash.new(next_state))
-          end
-        end
-      end
-    end
-  end
-end