isomorfeus-react 16.10.4 → 16.10.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e390e7a60d960e4f5505a7ba204ae646f5e1fbb9ec9456f92225af8f812dea29
-  data.tar.gz: c44535422d9175dbb3a289bb52ac823d35bc508c92865f75cae635f6bbba199b
+  metadata.gz: b2286c84dc8c51cc28fd6940b07a021109025122954b2784c2cb19e51da0b648
+  data.tar.gz: 778d14cf5a6369e19ef96fad94126df299a15585c95ce346af959579bc3c8c90
 SHA512:
-  metadata.gz: 430093313eccc5fa2f9277d533b9ddd88dbebf5095bbee93e369943336ec3944f89cc7836f014b71d339ddd2fd4c285303ccaaf2917381e165784b4c4714c31d
-  data.tar.gz: 8da7f0fba7ff5ec841458ccf2fe785936336e9a14adbe78689b8ef64e4d2ce183755a86554f3e8ac50e05cde37e1d1f527761a43ee19fe3a6b2b949991cc2751
+  metadata.gz: 8471a64f958f5f4eea8d77fcf0cc9f9b746de2ce8c6b2c088ca17dfb760498d286fad0dc8408cd7a7b8c492102b9e1a46ec9bf3361317eb474a61ad0ac9466ec
+  data.tar.gz: fc964591e3c95ae164ba3a910bbc966612f3fc02ac29774e16079b6df22a17b8b9c4a332cc4bd9906ee40f696f2cbdf4668fd392f95c5ee913a69a0cf7c0421e

data/README.md

@@ -19,7 +19,6 @@ apply, but in the Ruby way, see:
 
 Component Types:
 - [Class Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/class_component.md)
-- [Pure Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/pure_component.md)
 - [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)
@@ -61,4 +60,4 @@ https://github.com/facebook/react-devtools
 ### Specs and Benchmarks
 - clone repo
 - `bundle install`
-- `rake`
+- `rake`

data/lib/isomorfeus-react.rb

@@ -77,10 +77,6 @@ if RUBY_ENGINE == 'opal'
   require 'react/component/mixin'
   require 'react/component/base'
 
-  # React::PureComponent
-  require 'react/pure_component/mixin'
-  require 'react/pure_component/base'
-
   # init component reducers
   require 'lucid_component/reducers'
   LucidComponent::Reducers.add_component_reducers_to_store

data/lib/lucid_app/native_component_constructor.rb

@@ -55,11 +55,14 @@ module LucidApp
           }
           render() {
             Opal.React.render_buffer.push([]);
+            // console.log("lucid app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             Opal.React.active_components.push(this);
             Opal.React.active_redux_components.push(this.__ruby_instance);
-            #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+            let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
             Opal.React.active_redux_components.pop();
             Opal.React.active_components.pop();
+            // console.log("lucid app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             let children = Opal.React.render_buffer.pop();
             return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
           }
@@ -68,7 +71,7 @@ module LucidApp
             this.setState({ isomorfeus_store_state: next_state });
           }
           componentWillUnmount() {
-            if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
+            if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
           }
           validateProp(props, propName, componentName) {
             try { base.$validate_prop(propName, props[propName]) }

data/lib/lucid_component/event_handler.rb

@@ -8,7 +8,11 @@ module LucidComponent
       event_handlers << name
       %x{
         self.lucid_react_component.prototype[name] = function(event, info) {
-          #{ruby_event = ::React::SyntheticEvent.new(`event`)};
+          if (typeof event === "object") {
+            #{ruby_event = ::React::SyntheticEvent.new(`event`)};
+          } else {
+            #{ruby_event = `event`};
+          }
           #{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
         }
       }

data/lib/lucid_component/native_component_constructor.rb

@@ -43,11 +43,14 @@ module LucidComponent
           }
           render() {
             Opal.React.render_buffer.push([]);
+            // console.log("lucid component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             Opal.React.active_components.push(this);
             Opal.React.active_redux_components.push(this);
-            #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+            let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
             Opal.React.active_redux_components.pop();
             Opal.React.active_components.pop();
+            // console.log("lucid component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             return Opal.React.render_buffer.pop();
           }
           data_access() {
@@ -70,8 +73,8 @@ module LucidComponent
                          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 (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
+                } else if (next_props[property] !== this.props[property]) { return true; }
               }
             }
             for (var property in next_state) {
@@ -79,8 +82,8 @@ module LucidComponent
                 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 };
+                  if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
+                } else if (next_state[property] !== this.state[property]) { return true }
               }
             }
             return false;

data/lib/lucid_material/app/native_component_constructor.rb

@@ -56,11 +56,14 @@ module LucidMaterial
             }
             render() {
               Opal.React.render_buffer.push([]);
+              // console.log("material app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
               Opal.React.active_components.push(this);
               Opal.React.active_redux_components.push(this.__ruby_instance);
-              #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
               Opal.React.active_redux_components.pop();
               Opal.React.active_components.pop();
+              // console.log("material app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
               var children = Opal.React.render_buffer.pop();
               return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
             }
@@ -69,7 +72,7 @@ module LucidMaterial
               this.setState({ isomorfeus_store_state: next_state });
             }
             componentWillUnmount() {
-              if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
+              if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
             }
             validateProp(props, propName, componentName) {
               try { base.$validate_prop(propName, props[propName]) }

data/lib/lucid_material/component/native_component_constructor.rb

@@ -44,11 +44,14 @@ module LucidMaterial
             }
             render() {
               Opal.React.render_buffer.push([]);
+              // console.log("material component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
               Opal.React.active_components.push(this);
               Opal.React.active_redux_components.push(this);
-              #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
               Opal.React.active_redux_components.pop();
               Opal.React.active_components.pop();
+              // console.log("material component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
               return Opal.React.render_buffer.pop();
             }
             data_access() {
@@ -71,8 +74,8 @@ module LucidMaterial
                            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 (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
+                  } else if (next_props[property] !== this.props[property]) { return true; }
                 }
               }
               for (var property in next_state) {
@@ -80,8 +83,8 @@ module LucidMaterial
                   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 };
+                    if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
+                  } else if (next_state[property] !== this.state[property]) { return true }
                 }
               }
               return false;

data/lib/react.rb

@@ -17,7 +17,7 @@ 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);
       }
@@ -50,6 +50,7 @@ module React
             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]);
           }
         }
@@ -59,11 +60,11 @@ module React
     self.internal_prepare_args_and_render = function(component, args, block) {
       if (args.length > 0) {
         var last_arg = args[args.length - 1];
-        if (typeof last_arg === 'string' || last_arg instanceof String) {
+        if (last_arg && last_arg.constructor === String) {
           if (args.length === 1) { return Opal.React.internal_render(component, null, last_arg, null); }
-          else { return Opal.React.internal_render(component, args[0], last_arg, null); }
-        } else { return Opal.React.internal_render(component, args[0], null, block); }
-      } else { return Opal.React.internal_render(component, null, null, block); }
+          else { Opal.React.internal_render(component, args[0], last_arg, null); }
+        } else { Opal.React.internal_render(component, args[0], null, block); }
+      } else { Opal.React.internal_render(component, null, null, block); }
     };
 
     self.internal_render = function(component, props, string_child, block) {
@@ -75,23 +76,19 @@ module React
         children = string_child;
       } else if (block && block !== nil) {
         Opal.React.render_buffer.push([]);
+        // console.log("internal_render pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
         let block_result = block.$call();
-        let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
-        let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
-        if (block_result && block_result !== last_buffer_element && block_result !== nil &&
-            (typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
-              (typeof block_result.constructor !== "undefined" && block_result.constructor === Array && (block_result.length - 1) >= 0 && block_result[block_result.length - 1] &&
-                block_result[block_result.length - 1] !== last_buffer_element && typeof block_result[block_result.length - 1].$$typeof === "symbol"))) {
+        if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
           Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
         }
+        // console.log("internal_render popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
         children = Opal.React.render_buffer.pop();
-        if (children.length == 1) { children = children[0]; }
-        else if (children.length == 0) { children = null; }
+        if (children.length === 1) { children = children[0]; }
+        else if (children.length === 0) { children = null; }
       }
       if (props && props !== nil) { native_props = Opal.React.to_native_react_props(props); }
       react_element = Opal.global.React.createElement(component, native_props, children);
       Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
-      return react_element;
     };
 
     self.active_components = [];
@@ -134,27 +131,20 @@ module React
     %x{
       let component = null;
       let native_props = null;
-      if (typeof type.react_component !== 'undefined') {
-        component = type.react_component;
-      } else {
-        component = type;
-      }
-
-      Opal.React.render_buffer.push([]);
+      if (typeof type.react_component !== 'undefined') { component = type.react_component; }
+      else { component = type; }
       if (block !== nil) {
+        Opal.React.render_buffer.push([]);
+        // console.log("create_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
         let block_result = block.$call()
-        let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
-        let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
-        if (block_result && block_result !== last_buffer_element && block_result !== nil &&
-            (typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
-              (typeof block_result.constructor !== "undefined" && block_result.constructor === Array && (block_result.length - 1) >= 0 && block_result[block_result.length - 1] &&
-                block_result[block_result.length - 1] !== last_buffer_element && typeof block_result[block_result.length - 1].$$typeof === "symbol"))) {
+        if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
           Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
         }
+        // console.log("create_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
         children = Opal.React.render_buffer.pop()
         if (children.length == 1) { children = children[0]; }
         else if (children.length == 0) { children = null; }
-      }
+      } else if (children === nil) { children = null; }
       if (props && props !== nil) { native_props = Opal.React.to_native_react_props(props); }
       return Opal.global.React.createElement(component, native_props, children);
     }

data/lib/react/component/api.rb

@@ -63,6 +63,35 @@ module React
         end
       end
 
+      def get_react_element(arg, &block)
+        if block_given?
+          # execute block, fetch last element from buffer
+          %x{
+            let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
+            let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
+            block.$call();
+            // console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())
+            let new_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop();
+            if (last_buffer_element === new_element) { #{raise "Block did not create any React element!"} }
+            return new_element;
+          }
+        else
+          # element was rendered before being passed as arg
+          # fetch last element from buffer
+          # `console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
+          `Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop()`
+        end
+      end
+      alias gre get_react_element
+
+      def render_react_element(el)
+        # push el to buffer
+        `Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(el)`
+        # `console.log("render_react_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
+        nil
+      end
+      alias rre render_react_element
+
       def ref(name)
         `#@native[name]`
       end
@@ -77,4 +106,4 @@ module React
       end
     end
   end
-end
+end

data/lib/react/component/event_handler.rb

@@ -9,7 +9,11 @@ module React
         event_handlers << name
         %x{
           self.react_component.prototype[name] = function(event, info) {
-            #{ruby_event = ::React::SyntheticEvent.new(`event`)};
+            if (typeof event === "object") {
+              #{ruby_event = ::React::SyntheticEvent.new(`event`)};
+            } else {
+              #{ruby_event = `event`};
+            }
             #{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
           }
         }

data/lib/react/component/features.rb

@@ -15,20 +15,19 @@ module React
         end
         %x{
           Opal.React.render_buffer.push([]);
+          // console.log("portal pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
           if (block !== nil) {
             let block_result = block.$call()
             let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
             let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
-            if (block_result && block_result !== last_buffer_element && block_result !== nil &&
-                (typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
-                  (typeof block_result.constructor !== "undefined" && block_result.constructor === Array && (block_result.length - 1) >= 0 && block_result[block_result.length - 1] &&
-                    block_result[block_result.length - 1] !== last_buffer_element && typeof block_result[block_result.length - 1].$$typeof === "symbol"))) {
+            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
               Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
             }
           }
+          // console.log("portal popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
           var react_element = Opal.global.React.createPortal(Opal.React.render_buffer.pop(), element);
           Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
-          return react_element;
+          // console.log("portal pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
         }
       end
 

data/lib/react/component/native_component_constructor.rb

@@ -39,8 +39,11 @@ module React
             }
             render() {
               Opal.React.render_buffer.push([]);
+              // console.log("react component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
               Opal.React.active_components.push(this);
-              #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
+              // console.log("react component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
               Opal.React.active_components.pop();
               return Opal.React.render_buffer.pop();
             }
@@ -58,14 +61,14 @@ module React
 
                 for (var property in next_props) {
                   if (next_props.hasOwnProperty(property)) {
-                    if (!this.props.hasOwnProperty(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] !== "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 (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
+                    } else if (next_props[property] !== this.props[property]) { return true; }
                   }
                 }
                 for (var property in next_state) {
@@ -73,8 +76,8 @@ module React
                     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 };
+                      if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
+                    } else if (next_state[property] !== this.state[property]) { return true }
                   }
                 }
                 return false;

data/lib/react/component/props.rb

@@ -5,9 +5,11 @@ module React
 
       def method_missing(prop, *args, &block)
         %x{
-          var prop_name = Opal.React.lower_camelize(prop);
-          if (typeof #@native.props[prop_name] === 'undefined') { return #{nil}; }
-          return #@native.props[prop_name];
+          if (typeof #@native.props[prop] === 'undefined') {
+            prop = Opal.React.lower_camelize(prop);
+            if (typeof #@native.props[prop] === 'undefined') { return #{nil}; }
+          }
+          return #@native.props[prop];
         }
       end
 
@@ -25,8 +27,8 @@ module React
 
       # for router convenience
       def history
-        return nil unless @native.JS[:props].JS[:history]
-        if @native.JS[:props].JS[:history].JS[:pathname]
+        return nil if `typeof #@native.props.history === 'undefined'`
+        if `typeof #@native.props.history.pathname !== 'undefined'`
           React::Component::History.new(@native.JS[:props].JS[:history])
         else
           @native.JS[:props].JS[:history]
@@ -34,8 +36,8 @@ module React
       end
 
       def location
-        return nil unless @native.JS[:props].JS[:location]
-        if @native.JS[:props].JS[:location].JS[:pathname]
+        return nil if `typeof #@native.props.location === 'undefined'`
+        if `typeof #@native.props.location.pathname !== 'undefined'`
           React::Component::Location.new(@native.JS[:props].JS[:location])
         else
           @native.JS[:props].JS[:location]
@@ -43,8 +45,8 @@ module React
       end
 
       def match
-        return nil unless @native.JS[:props].JS[:match]
-        if @native.JS[:props].JS[:match].JS[:path]
+        return nil if `typeof #@native.props.match === 'undefined'`
+        if `typeof #@native.props.match.path !== 'undefined'`
           React::Component::Match.new(@native.JS[:props].JS[:match])
         else
           @native.JS[:props].JS[:match]

data/lib/react/component/state.rb

@@ -13,7 +13,7 @@ module React
             @native.JS.setState(new_state, `null`)
           end
         else
-          return nil if `typeof #@native.state[key] == "undefined"`
+          return nil if `typeof #@native.state[key] === "undefined"`
           @native.JS[:state].JS[key]
         end
       end
@@ -49,4 +49,4 @@ module React
       end
     end
   end
-end
+end

data/lib/react/context_wrapper.rb

@@ -7,36 +7,34 @@ module React
     end
 
     def Consumer(*args, &block)
+      # why not use internal_prepare_args and render?
       %x{
-        let children = null;
         let props = null;
 
         if (args.length > 0) { props = Opal.React.to_native_react_props(args[0]); }
 
         let react_element = Opal.global.React.createElement(this.native.Consumer, props, function(value) {
+          let children = null;
           if (block !== nil) {
             Opal.React.render_buffer.push([]);
+            // console.log("consumer pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             let block_result = block.$call();
-            let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
-            let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
-            if (block_result && block_result !== last_buffer_element && block_result !== nil &&
-                (typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
-                  (typeof block_result.constructor !== "undefined" && block_result.constructor === Array && (block_result.length - 1) >= 0 && block_result[block_result.length - 1] &&
-                    block_result[block_result.length - 1] !== last_buffer_element && typeof block_result[block_result.length - 1].$$typeof === "symbol"))) {
+            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
               Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
             }
+            // console.log("consumer popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             children = Opal.React.render_buffer.pop();
             if (children.length == 1) { children = children[0]; }
             else if (children.length == 0) { children = null; }
           }
-          return Opal.React.render_buffer.pop();
+          return children;
         });
         Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
-        return null;
       }
     end
 
     def Provider(*args, &block)
+      # why not use internal_prepare_args and render?
       %x{
         var props = null;
         if (args.length > 0) { props = Opal.React.to_native_react_props(args[0]); }

data/lib/react/function_component/api.rb

@@ -58,6 +58,35 @@ module React
         `[initial, setter] = Opal.global.React.useState(initial_value);`
         [initial, proc { |arg| `setter(arg)` }]
       end
+
+      def get_react_element(arg, &block)
+        if block_given?
+          # execute block, fetch last element from buffer
+          %x{
+            let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
+            let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
+            block.$call();
+            // console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())
+            let new_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop();
+            if (last_buffer_element === new_element) { #{raise "Block did not create any React element!"} }
+            return new_element;
+          }
+        else
+          # element was rendered before being passed as arg
+          # fetch last element from buffer
+          # `console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
+          `Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop()`
+        end
+      end
+      alias gre get_react_element
+
+      def render_react_element(el)
+        # push el to buffer
+        `Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(el)`
+        # `console.log("render_react_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
+        nil
+      end
+      alias rre render_react_element
     end
   end
 end

data/lib/react/function_component/creator.rb

@@ -5,9 +5,12 @@ module React
         %x{
           base.react_component = function(props) {
             Opal.React.render_buffer.push([]);
+            // console.log("function pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             Opal.React.active_components.push(base);
-            #{base.new(`props`).instance_exec(&`base.function_block`)};
+            let block_result = #{base.new(`props`).instance_exec(&`base.function_block`)};
+            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
             Opal.React.active_components.pop();
+            // console.log("function popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             return Opal.React.render_buffer.pop();
           }
         }

data/lib/react/function_component/event_handler.rb

@@ -3,7 +3,11 @@ module React
     module EventHandler
       def event_handler(name, &block)
         define_method(name) do |event, info|
-          ruby_event = ::React::SyntheticEvent.new(event)
+          ruby_event = if `typeof event === "object"`
+                         ::React::SyntheticEvent.new(event)
+                       else
+                         event
+                       end
           block.call(ruby_event, info)
         end
         `self[name] = self.prototype['$' + name]`

data/lib/react/memo_component/creator.rb

@@ -6,9 +6,12 @@ module React
           base.equality_checker = null;
           base.react_component = Opal.global.React.memo(function(props) {
             Opal.React.render_buffer.push([]);
+            // console.log("memo pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             Opal.React.active_components.push(base);
-            #{base.new(`props`).instance_exec(&`base.function_block`)};
+            let block_result = #{base.new(`props`).instance_exec(&`base.function_block`)};
+            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
             Opal.React.active_components.pop();
+            // console.log("memo popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
             return Opal.React.render_buffer.pop();
           }, base.equality_checker);
         }

data/lib/react/version.rb

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

data/lib/react_dom.rb

@@ -11,26 +11,20 @@ module ReactDOM
 
     def hydrate(native_react_element, container, &block)
       # container is a native DOM element
-      `Opal.React.render_buffer.push([]);`
-      result = if block_given?
-                 `Opal.global.ReactDOM.hydrate(native_react_element, container, function() { block.$call() })`
-               else
-                 `Opal.global.ReactDOM.hydrate(native_react_element, container)`
-               end
-      `Opal.React.render_buffer.pop()`
-      result
+      if block_given?
+        `Opal.global.ReactDOM.hydrate(native_react_element, container, function() { block.$call() })`
+      else
+        `Opal.global.ReactDOM.hydrate(native_react_element, container)`
+      end
     end
 
     def render(native_react_element, container, &block)
       # container is a native DOM element
-      `Opal.React.render_buffer.push([]);`
-      result = if block_given?
-                 `Opal.global.ReactDOM.render(native_react_element, container, function() { block.$call() })`
-               else
-                 `Opal.global.ReactDOM.render(native_react_element, container)`
-               end
-      `Opal.React.render_buffer.pop()`
-      result
+      if block_given?
+        `Opal.global.ReactDOM.render(native_react_element, container, function() { block.$call() })`
+      else
+        `Opal.global.ReactDOM.render(native_react_element, container)`
+      end
     end
 
     def unmount_component_at_node(element_or_query)
@@ -44,4 +38,4 @@ module ReactDOM
       `Opal.global.ReactDOM.unmountComponentAtNode(element)`
     end
   end
-end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.10.4
+  version: 16.10.5
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-10-04 00:00:00.000000000 Z
+date: 2019-10-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: oj
@@ -232,8 +232,6 @@ files:
 - lib/react/memo_component/creator.rb
 - lib/react/memo_component/mixin.rb
 - lib/react/native_constant_wrapper.rb
-- lib/react/pure_component/base.rb
-- lib/react/pure_component/mixin.rb
 - lib/react/ref.rb
 - lib/react/synthetic_event.rb
 - lib/react/version.rb

data/lib/react/pure_component/base.rb

@@ -1,9 +0,0 @@
-module React
-  module PureComponent
-    class Base
-      def self.inherited(base)
-        base.include(::React::PureComponent::Mixin)
-      end
-    end
-  end
-end

data/lib/react/pure_component/mixin.rb

@@ -1,18 +0,0 @@
-module React
-  module PureComponent
-    module Mixin
-      def self.included(base)
-        base.include(::Native::Wrapper)
-        base.extend(::React::Component::NativeComponentConstructor)
-        base.extend(::LucidPropDeclaration::Mixin)
-        base.extend(::React::Component::EventHandler)
-        base.include(::React::Component::Elements)
-        base.include(::React::Component::API)
-        base.include(::React::Component::Callbacks)
-        base.include(::React::Component::Initializer)
-        base.include(::React::Component::Features)
-        base.include(::React::Component::Resolution)
-      end
-    end
-  end
-end