isomorfeus-react 16.13.8 → 16.13.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f67822be9b751d903e6d1415ff490453c257885f4e699ad762c084f531daccfe
-  data.tar.gz: a6199d933fcfa3114aa1e65e34625c53f239aacccde3fe3255c6ff977d3a16c8
+  metadata.gz: 6e035ee0fa52630bee7cabe9a6e42043807ab3214aff268c94ab3d11a18c1bf5
+  data.tar.gz: 941bd2452ff4ca38292dd60e6a74cc89bb6b5e378152e2dfe3b9dcfcae10867c
 SHA512:
-  metadata.gz: 73006371dbdf55f4ffa13d45592e1032c149da4a9a6402b067ae98fd11aba9673d4538a777ba6e4cadf3b0dbba39c93b7d7bfdd122705dc22c9e360d8f1d130d
-  data.tar.gz: 9f58f046646eca578f92f0586afd8386da05fd134898679023284d66b5e5fab6c56d6b762e764eaf200006468954bd99b1b81ad975b48eb4954a1364fe8b4064
+  metadata.gz: 254fb5ad51c52ff2521494614bedbe215dd2980daed1300c00f98032d34460d798487c8dd5ccfebd26a823d63064e232be46030f1f22d793b6a42ccd6404aa4f
+  data.tar.gz: 1a4b829bba24df5e78ebbff63cf6e688b8083d5349b41f08bf05234bc4ae7c5f4fb8726e5f20d1b94463a33aa0e74f47125bc5e3e98e7c23736fb6ef5eade765

data/lib/isomorfeus_react/lucid_component/native_component_constructor.rb

@@ -7,7 +7,7 @@ module LucidComponent
       component_name = base.to_s + 'Wrapper'
       # language=JS
       %x{
-        base.react_component = function(props) {
+        base.react_component = Opal.global.React.memo(function(props) {
           let opag = Opal.global;
           let classes;
           let store;
@@ -27,7 +27,7 @@ module LucidComponent
           new_props.theme = theme;
           new_props.store = store;
           return opag.React.createElement(base.lucid_react_component, new_props);
-        };
+        }, null);
         base.react_component.displayName = #{component_name};
       }
     end

data/lib/isomorfeus_react/lucid_component/native_lucid_component_constructor.rb

@@ -63,30 +63,32 @@ module LucidComponent
           }
           shouldComponentUpdate(next_props, next_state) {
             let counter = 0;
+            const this_props = this.props;
             for (var property in next_props) {
               counter++;
               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]['$!='] === "function" &&
-                         typeof this.props[property] !== "undefined" && this.props[property] !== null ) {
-                  if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
-                } else if (next_props[property] !== this.props[property]) { return true; }
+                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] === "object" && next_props[property] !== null && typeof next_props[property]['$!='] === "function" &&
+                         typeof this_props[property] !== "undefined" && this_props[property] !== null ) {
+                  if (#{ !! (`next_props[property]` != `this_props[property]`) }) { return true; }
+                } else if (next_props[property] !== this_props[property]) { return true; }
               }
             }
-            if (counter !== Object.keys(this.props).length) { return true; }
+            if (counter !== Object.keys(this_props).length) { return true; }
             counter = 0;
+            const this_state = this.state;
             for (var property in next_state) {
               counter++;
               if (next_state.hasOwnProperty(property)) {
-                if (!this.state.hasOwnProperty(property)) { return true; };
-                if (typeof next_state[property] !== "undefined" && next_state[property] !== null && typeof next_state[property]['$!='] === "function" &&
-                    typeof this.state[property] !== "undefined" && this.state[property] !== null) {
-                  if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
-                } else if (next_state[property] !== this.state[property]) { return true }
+                if (!this_state.hasOwnProperty(property)) { return true; };
+                if (typeof next_state[property] === "object" && next_state[property] !== null && typeof next_state[property]['$!='] === "function" &&
+                    typeof this_state[property] !== "undefined" && this_state[property] !== null) {
+                  if (#{ !! (`next_state[property]` != `this_state[property]`) }) { return true }
+                } else if (next_state[property] !== this_state[property]) { return true }
               }
             }
-            if (counter !== Object.keys(this.state).length) { return true; }
+            if (counter !== Object.keys(this_state).length) { return true; }
             return false;
           }
           validateProp(props, propName, componentName) {

data/lib/isomorfeus_react_material/lucid_material/component/native_component_constructor.rb

@@ -8,7 +8,7 @@ module LucidMaterial
         component_name = base.to_s + 'Wrapper'
         # language=JS
         %x{
-          base.react_component = function(props) {
+          base.react_component = Opal.global.React.memo(function(props) {
             let classes = null;
             let store;
             if (base.store_updates) { store = Opal.global.React.useContext(Opal.global.LucidApplicationContext); }
@@ -27,7 +27,7 @@ module LucidMaterial
             new_props.theme = theme;
             new_props.store = store;
             return Opal.global.React.createElement(base.lucid_react_component, new_props);
-          }
+          }, null);
           base.react_component.displayName = #{component_name};
         }
       end

data/lib/react.rb

@@ -13,11 +13,13 @@ module React
     };
 
     self.lower_camelize = function(snake_cased_word) {
+      if (self.prop_dictionary[snake_cased_word]) { return self.prop_dictionary[snake_cased_word]; }
       let parts = snake_cased_word.split('_');
       let res = parts[0];
       for (let i = 1; i < parts.length; i++) {
         res += parts[i][0].toUpperCase() + parts[i].slice(1);
       }
+      self.prop_dictionary[snake_cased_word] = res;
       return res;
     };
 
@@ -82,6 +84,8 @@ module React
 
   if on_browser? || on_ssr?
     %x{
+      self.prop_dictionary = {};
+
       self.to_native_react_props = function(ruby_style_props) {
         let result = {};
         let keys = ruby_style_props.$$keys;
@@ -148,7 +152,7 @@ module React
             if (typeof value.$to_n === "function") { value = value.$to_n() }
             result["style"] = value;
           } else {
-            result[key.indexOf('_') > 0 ? self.lower_camelize(key) : key] = value;
+            result[self.lower_camelize(key)] = value;
           }
         }
         return result;
@@ -162,20 +166,21 @@ module React
 
       self.internal_render = function(component, props, string_child, block) {
         const operabu = self.render_buffer;
-        let children;
-        let native_props = null;
+        let native_props;
+        if (props && props !== nil) { native_props = self.to_native_react_props(props); }
         if (string_child) {
-          children = [string_child];
+          operabu[operabu.length - 1].push(Opal.global.React.createElement(component, native_props, string_child));
         } else if (block && block !== nil) {
           operabu.push([]);
           // console.log("internal_render pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
           let block_result = block.$call();
           if (block_result && block_result !== nil) { Opal.React.render_block_result(block_result); }
           // console.log("internal_render popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-          children = operabu.pop();
+          let children = operabu.pop();
+          operabu[operabu.length - 1].push(Opal.global.React.createElement.apply(this, [component, native_props].concat(children)));
+        } else {
+          operabu[operabu.length - 1].push(Opal.global.React.createElement(component, native_props));
         }
-        if (props && props !== nil) { native_props = self.to_native_react_props(props); }
-        operabu[operabu.length - 1].push(Opal.global.React.createElement.apply(this, [component, native_props].concat(children)));
       };
     }
   end

data/lib/react/component/native_component_constructor.rb

@@ -54,30 +54,32 @@ module React
                 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`)};
               }
               let counter = 0;
+              const this_props = this.props;
               for (var property in next_props) {
                 counter++;
                 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]['$!='] === "function" &&
-                           typeof this.props[property] !== "undefined" && this.props[property] !== null ) {
-                    if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
-                  } else if (next_props[property] !== this.props[property]) { return true; }
+                  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] === "object" && next_props[property] !== null && typeof next_props[property]['$!='] === "function" &&
+                           typeof this_props[property] !== "undefined" && this_props[property] !== null ) {
+                    if (#{ !! (`next_props[property]` != `this_props[property]`) }) { return true; }
+                  } else if (next_props[property] !== this_props[property]) { return true; }
                 }
               }
-              if (counter !== Object.keys(this.props).length) { return true; }
+              if (counter !== Object.keys(this_props).length) { return true; }
               counter = 0;
+              const this_state = this.state;
               for (var property in next_state) {
                 counter++;
                 if (next_state.hasOwnProperty(property)) {
-                  if (!this.state.hasOwnProperty(property)) { return true; };
-                  if (typeof next_state[property] !== "undefined" && next_state[property] !== null && typeof next_state[property]['$!='] === "function" &&
-                      typeof this.state[property] !== "undefined" && this.state[property] !== null) {
-                    if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
-                  } else if (next_state[property] !== this.state[property]) { return true }
+                  if (!this_state.hasOwnProperty(property)) { return true; };
+                  if (typeof next_state[property] === "object" && next_state[property] !== null && typeof next_state[property]['$!='] === "function" &&
+                      typeof this_state[property] !== "undefined" && this_state[property] !== null) {
+                    if (#{ !! (`next_state[property]` != `this_state[property]`) }) { return true }
+                  } else if (next_state[property] !== this_state[property]) { return true }
                 }
               }
-              if (counter !== Object.keys(this.state).length) { return true; }
+              if (counter !== Object.keys(this_state).length) { return true; }
               return false;
             }
             validateProp(props, propName, componentName) {

data/lib/react/component/props.rb

@@ -7,11 +7,12 @@ module React
 
       def method_missing(prop, *args, &block)
         %x{
-          if (typeof #@native.props[prop] === 'undefined') {
+          const p = #@native.props;
+          if (typeof p[prop] === 'undefined') {
             prop = Opal.React.lower_camelize(prop);
-            if (typeof #@native.props[prop] === 'undefined') { return #{nil}; }
+            if (typeof p[prop] === 'undefined') { return nil; }
           }
-          return #@native.props[prop];
+          return p[prop];
         }
       end
 

data/lib/react/component/state.rb

@@ -13,8 +13,10 @@ module React
             @native.JS.setState(new_state, `null`)
           end
         else
-          return nil if `typeof #@native.state[key] === "undefined"`
-          @native.JS[:state].JS[key]
+          %x{
+            if (typeof #@native.state[key] === 'undefined') { return nil; }
+            return #@native.state[key];
+          }
         end
       end
 

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.13.8'
+  VERSION = '16.13.9'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.13.8
+  version: 16.13.9
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-15 00:00:00.000000000 Z
+date: 2020-03-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: concurrent-ruby