isomorfeus-react 16.13.6 → 16.13.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5f97bbd2f1542a8acddd67498fffd95bd2b1c9e08ca3da26010470af0b56f30
-  data.tar.gz: aa2125291618e7a529acef65ce56e6525a35129f8fec12d847333ac5aa3412a2
+  metadata.gz: 00ebd90f9dcc932229cd15abf790ba5b3cdfeb793d56cb0521f98a953a3b4371
+  data.tar.gz: 929ac44e9f43761ce833a3c704d80d88cc9aa20bb5c47ef20d612986d5f16092
 SHA512:
-  metadata.gz: 805bbca266c1a7426d64a154a4c1c3ae01f776f2d09942974751b9124cb941839b857569e11ed3e9343f4708afcd05ff8ae3add262329cfdf44f18903f5adb7b
-  data.tar.gz: 601c4c263c4e50e284a54764b76debf59e35bd380d8f06082adff46a9e28411079d3bc409214e1b22c29fae6ae30f4cb6109cba46b71643948aee2ae4c5cbbaf
+  metadata.gz: 8b008ddea28e398f7c5d777e2f27fd99c6b0a18780d58cd7108f6f203c25d571fbd18f2268fed1fe37e6ad9b681c2cd3cfbdc938dadda831c778691fe2ba56b4
+  data.tar.gz: c36be091b3c641a9eefc22516895288dbaab2a335b150f06c4e0f76aaf1513350d18d73a569203fb1e22f8fc733912d78a35e732131b06cbbe07bb1bd7d799d3

data/lib/isomorfeus/top_level.rb

@@ -72,13 +72,6 @@ module Isomorfeus
           }
           ready_fun(run);
         }
-        # %x{
-        #   function run() { block.$call() };
-        #   function ready_fun() {
-        #     /in/.test(document.readyState) ? setTimeout(ready_fun,5) : run();
-        #   }
-        #   ready_fun();
-        # }
       end
 
       def on_ready_mount(component, props = nil, element_query = nil)

data/lib/isomorfeus_react/lucid_app/mixin.rb

@@ -3,9 +3,14 @@ module LucidApp
     def self.included(base)
       base.include(::Native::Wrapper)
       base.extend(::LucidApp::NativeLucidComponentConstructor)
-      base.extend(::LucidApp::NativeComponentConstructor)
+      if on_browser? || on_ssr?
+        base.extend(::LucidApp::NativeComponentConstructor)
+        base.include(::React::Component::Elements)
+      elsif on_mobile?
+        base.extend(::LucidApp::ReactNativeComponentConstructor)
+        base.include(::ReactNative::Component::Elements)
+      end
       base.extend(::LucidPropDeclaration::Mixin)
-      base.include(::React::Component::Elements)
       base.include(::React::Component::Api)
       base.include(::React::Component::Callbacks)
       base.include(::LucidComponent::Api)

data/lib/isomorfeus_react/lucid_app/native_component_constructor.rb

@@ -14,7 +14,7 @@ module LucidApp
           let classes = null;
           let theme = opag.ReactJSS.useTheme();
           if (base.jss_styles) {
-            if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+            if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
               let styles;
               if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
               else { styles = base.jss_styles; }
@@ -24,13 +24,25 @@ module LucidApp
           }
           let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
           return opag.React.createElement(base.lucid_react_component, themed_classes_props);
-        }
+        };
         base.themed_react_component.displayName = #{theme_component_name};
-        base.react_component = function(props) {
-          let themed_component = Opal.global.React.createElement(base.themed_react_component, props);
-          return Opal.global.React.createElement(Opal.global.ReactJSS.ThemeProvider, { theme: base.jss_theme }, themed_component);
+        base.react_component = class extends Opal.global.React.Component {
+          constructor(props) {
+            super(props);
+            if (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
+          }
+          static get displayName() {
+            return "IsomorfeusTopLevelComponent";
+          }
+          static set displayName(new_name) {
+            // dont do anything here except returning the set value
+            return new_name;
+          }
+          render() {
+            let themed_component = Opal.global.React.createElement(base.themed_react_component, this.props);
+            return Opal.global.React.createElement(Opal.global.ReactJSS.ThemeProvider, { theme: base.jss_theme }, themed_component);
+          }
         }
-        base.react_component.displayName = #{component_name};
       }
     end
   end

data/lib/isomorfeus_react/lucid_app/native_lucid_component_constructor.rb

@@ -26,7 +26,6 @@ module LucidApp
               this.state.class_state[#{component_name}] = {};
             };
             this.__ruby_instance = base.$new(this);
-            if (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
             var defined_refs = #{base.defined_refs};
             for (var ref in defined_refs) {
               if (defined_refs[ref] != null) {
@@ -63,7 +62,7 @@ module LucidApp
             let block_result;
             if (base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
             else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
             oper.active_redux_components.pop();
             oper.active_components.pop();
             let children = oper.render_buffer.pop();

data/lib/isomorfeus_react/lucid_component/mixin.rb

@@ -3,9 +3,14 @@ module LucidComponent
     def self.included(base)
       base.include(::Native::Wrapper)
       base.extend(::LucidComponent::NativeLucidComponentConstructor)
-      base.extend(::LucidComponent::NativeComponentConstructor)
+      if on_browser? || on_ssr?
+        base.extend(::LucidComponent::NativeComponentConstructor)
+        base.include(::React::Component::Elements)
+      elsif on_mobile?
+        base.extend(::LucidComponent::ReactNativeComponentConstructor)
+        base.include(::ReactNative::Component::Elements)
+      end
       base.extend(::LucidPropDeclaration::Mixin)
-      base.include(::React::Component::Elements)
       base.include(::React::Component::Api)
       base.include(::React::Component::Callbacks)
       base.include(::LucidComponent::Api)

data/lib/isomorfeus_react/lucid_component/native_component_constructor.rb

@@ -9,12 +9,12 @@ module LucidComponent
       %x{
         base.react_component = function(props) {
           let opag = Opal.global;
-          let classes = null;
+          let classes;
           let store;
           if (base.store_updates) { store = opag.React.useContext(opag.LucidApplicationContext); }
           let theme = opag.ReactJSS.useTheme();
           if (base.jss_styles) {
-            if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+            if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
               let styles;
               if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
               else { styles = base.jss_styles; }
@@ -27,7 +27,7 @@ module LucidComponent
           new_props.theme = theme;
           new_props.store = store;
           return opag.React.createElement(base.lucid_react_component, new_props);
-        }
+        };
         base.react_component.displayName = #{component_name};
       }
     end

data/lib/isomorfeus_react/lucid_component/native_lucid_component_constructor.rb

@@ -51,13 +51,12 @@ module LucidComponent
             let block_result;
             if (base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
             else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
             oper.active_redux_components.pop();
             oper.active_components.pop();
             // console.log("lucid component popping", oper.render_buffer, oper.render_buffer.toString());
             let result = oper.render_buffer.pop();
-            if (result.length === 1) { return result[0]; }
-            return result;
+            return (result.length === 1) ? result[0] : result;
           }
           data_access() {
             return this.props.store;

data/lib/isomorfeus_react/lucid_func/mixin.rb

@@ -1,11 +1,16 @@
 module LucidFunc
   module Mixin
     def self.included(base)
-      base.include(::React::Component::Elements)
       base.include(::React::Component::Features)
       base.include(::LucidFunc::Initializer)
       base.include(::React::FunctionComponent::Api)
-      base.extend(::LucidFunc::NativeComponentConstructor)
+      if on_browser?  || on_ssr?
+        base.extend(::LucidFunc::NativeComponentConstructor)
+        base.include(::React::Component::Elements)
+      elsif on_mobile?
+        base.extend(::LucidFunc::ReactNativeComponentConstructor)
+        base.include(::ReactNative::Component::Elements)
+      end
       base.include(::LucidComponent::Api)
     end
   end

data/lib/isomorfeus_react/lucid_func/native_component_constructor.rb

@@ -24,7 +24,7 @@ module LucidFunc
           if (base.store_updates) { store = og.React.useContext(og.LucidApplicationContext); }
           let theme = og.ReactJSS.useTheme();
           if (base.jss_styles) {
-            if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+            if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
               let styles;
               if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
               else { styles = base.jss_styles; }
@@ -42,13 +42,12 @@ module LucidFunc
           oper.active_components.push(__ruby_instance);
           oper.active_redux_components.push(__ruby_instance);
           let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
-          if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+          if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
           oper.active_redux_components.pop();
           oper.active_components.pop();
           // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
           let result = oper.render_buffer.pop();
-          if (result.length === 1) { return result[0]; }
-          return result;
+          return (result.length === 1) ? result[0] : result;
         }, base.equality_checker);
         base.react_component.displayName = #{component_name};
       }

data/lib/isomorfeus_react/react/function_component/mixin.rb

@@ -2,7 +2,11 @@ module React
   module FunctionComponent
     module Mixin
       def self.included(base)
-        base.include(::React::Component::Elements)
+        if on_browser? || on_ssr?
+          base.include(::React::Component::Elements)
+        elsif on_mobile?
+          base.include(::ReactNative::Component::Elements)
+        end
         base.include(::React::Component::Features)
         base.include(::React::FunctionComponent::Initializer)
         base.include(::React::FunctionComponent::Api)

data/lib/isomorfeus_react/react/function_component/native_component_constructor.rb

@@ -19,10 +19,11 @@ module React
             __ruby_instance.props = props;
             oper.active_components.push(__ruby_instance);
             let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
             oper.active_components.pop();
             // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
-            return oper.render_buffer.pop();
+            let result = oper.render_buffer.pop();
+            return (result.length === 1) ? result[0] : result;
           }
           base.react_component.displayName = #{component_name};
         }

data/lib/isomorfeus_react/react/memo_component/mixin.rb

@@ -2,7 +2,11 @@ module React
   module MemoComponent
     module Mixin
       def self.included(base)
-        base.include(::React::Component::Elements)
+        if on_browser? || on_ssr?
+          base.include(::React::Component::Elements)
+        elsif on_mobile?
+          base.include(::ReactNative::Component::Elements)
+        end
         base.include(::React::Component::Features)
         base.include(::React::FunctionComponent::Initializer)
         base.include(::React::FunctionComponent::Api)

data/lib/isomorfeus_react/react/memo_component/native_component_constructor.rb

@@ -20,12 +20,11 @@ module React
             __ruby_instance.props = props;
             oper.active_components.push(__ruby_instance);
             let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
             oper.active_components.pop();
             // console.log("memo popping", oper.render_buffer, oper.render_buffer.toString());
             let result = oper.render_buffer.pop();
-            if (result.length === 1) { return result[0]; }
-            return result;
+            return (result.length === 1) ? result[0] : result;
           }, base.equality_checker);
           base.react_component.displayName = #{component_name};
         }

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

@@ -15,7 +15,7 @@ module LucidMaterial
             let classes = null;
             let theme = opag.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+              if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
                 let styles;
                 if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
                 else { styles = base.jss_styles; }
@@ -27,11 +27,23 @@ module LucidMaterial
             return opag.React.createElement(base.lucid_react_component, themed_classes_props);
           }
           base.themed_react_component.displayName = #{theme_component_name};
-          base.react_component = function(props) {
-            let themed_component = Opal.global.React.createElement(base.themed_react_component, props);
-            return Opal.global.React.createElement(Opal.global.MuiStyles.ThemeProvider, { theme: base.jss_theme }, themed_component);
+          base.react_component = class extends Opal.global.React.Component {
+            constructor(props) {
+              super(props);
+              if (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
+            }
+            static get displayName() {
+              return "IsomorfeusTopLevelComponent";
+            }
+            static set displayName(new_name) {
+              // dont do anything here except returning the set value
+              return new_name;
+            }
+            render() {
+              let themed_component = Opal.global.React.createElement(base.themed_react_component, this.props);
+              return Opal.global.React.createElement(Opal.global.MuiStyles.ThemeProvider, { theme: base.jss_theme }, themed_component);
+            }
           }
-          base.react_component.displayName = #{component_name};
         }
       end
     end

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

@@ -14,7 +14,7 @@ module LucidMaterial
             if (base.store_updates) { store = Opal.global.React.useContext(Opal.global.LucidApplicationContext); }
             let theme = Opal.global.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+              if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
                 let styles;
                 if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
                 else { styles = base.jss_styles; }

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

@@ -25,7 +25,7 @@ module LucidMaterial
             if (base.store_updates) { store = og.React.useContext(og.LucidApplicationContext); }
             let theme = og.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+              if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
                 let styles;
                 if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
                 else { styles = base.jss_styles; }
@@ -43,13 +43,12 @@ module LucidMaterial
             oper.active_components.push(__ruby_instance);
             oper.active_redux_components.push(__ruby_instance);
             let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
             oper.active_redux_components.pop();
             oper.active_components.pop();
             // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
             let result = oper.render_buffer.pop();
-            if (result.length === 1) { return result[0]; }
-            return result;
+            return (result.length === 1) ? result[0] : result;
           }, base.equality_checker);
           base.react_component.displayName = #{component_name};
         }

data/lib/react.rb

@@ -1,5 +1,4 @@
 module React
-  # language=JS
   %x{
     self.render_buffer = [];
 
@@ -34,79 +33,6 @@ module React
        else { return Opal.Hash.$new(event); }
     };
 
-    self.to_native_react_props = function(ruby_style_props) {
-      let result = {};
-      let keys = ruby_style_props.$keys();
-      let keys_length = keys.length;
-      let key = '';
-      for (let i = 0; i < keys_length; i++) {
-        key = keys[i];
-        if (key[0] === 'o' && key[1] === 'n' && key[2] === '_') {
-          let handler = ruby_style_props['$[]'](key);
-          let type = typeof handler;
-          if (type === "function") {
-            let active_c = self.active_component();
-            result[self.lower_camelize(key)] = function(event, info) {
-              let ruby_event = self.native_to_ruby_event(event);
-              #{`active_c.__ruby_instance`.instance_exec(`ruby_event`, `info`, &`handler`)};
-            }
-          } else if (type === "object" && typeof handler.$call === "function" ) {
-            if (!handler.react_event_handler_function) {
-              handler.react_event_handler_function = function(event, info) {
-                let ruby_event = self.native_to_ruby_event(event);
-                handler.$call(ruby_event, info)
-              };
-            }
-            result[self.lower_camelize(key)] = handler.react_event_handler_function;
-          } else if (type === "string" ) {
-            let active_component = self.active_component();
-            let method_ref;
-            let method_name = '$' + handler;
-            if (typeof active_component[method_name] === "function") {
-              // got a ruby instance
-              if (active_component.native && active_component.native.method_refs && active_component.native.method_refs[handler]) { method_ref = active_component.native.method_refs[handler]; } // ruby instance with native
-              else if (active_component.method_refs && active_component.method_refs[handler]) { method_ref = active_component.method_refs[handler]; } // ruby function component
-              else { method_ref = active_component.$method_ref(handler); } // create the ref
-            } else if (typeof active_component.__ruby_instance[method_name] === "function") {
-              // got a native instance
-              if (active_component.method_refs && active_component.method_refs[handler]) { method_ref = active_component.method_refs[handler]; }
-              else { method_ref = active_component.__ruby_instance.$method_ref(handler); } // create ref for native
-            }
-            if (method_ref) {
-              if (!method_ref.react_event_handler_function) {
-                method_ref.react_event_handler_function = function(event, info) {
-                  let ruby_event = self.native_to_ruby_event(event);
-                  method_ref.$call(ruby_event, info)
-                };
-              }
-              result[self.lower_camelize(key)] = method_ref.react_event_handler_function;
-            } else {
-              let component_name;
-              if (active_component.__ruby_instance) { component_name = active_component.__ruby_instance.$to_s(); }
-              else { component_name = active_component.$to_s(); }
-              #{Isomorfeus.raise_error(message: "Is #{`handler`} a valid method of #{`component_name`}? If so then please use: #{`key`}: method_ref(:#{`handler`}) within component: #{`component_name`}")}
-            }
-          } else {
-            let active_component = self.active_component();
-            let component_name;
-            if (active_component.__ruby_instance) { component_name = active_component.__ruby_instance.$to_s(); }
-            else { component_name = active_component.$to_s(); }
-            #{Isomorfeus.raise_error(message: "Received invalid value for #{`key`} with #{`handler`} within component: #{`component_name`}")}
-            console.error( + key + " event handler:", handler, " within component:", self.active_component());
-          }
-        } else if (key[0] === 'a' && key.startsWith("aria_")) {
-          result[key.replace("_", "-")] = ruby_style_props['$[]'](key);
-        } else if (key === "style") {
-          let val = ruby_style_props['$[]'](key);
-          if (typeof val.$to_n === "function") { val = val.$to_n() }
-          result["style"] = val;
-        } else {
-          result[key.indexOf('_') > 0 ? self.lower_camelize(key) : key] = ruby_style_props['$[]'](key);
-        }
-      }
-      return result;
-    };
-
     self.internal_prepare_args_and_render = function(component, args, block) {
       const operain = self.internal_render;
       if (args.length > 0) {
@@ -118,26 +44,6 @@ module React
       } else { operain(component, null, null, block); }
     };
 
-    self.internal_render = function(component, props, string_child, block) {
-      const operabu = self.render_buffer;
-      let children;
-      let native_props = null;
-      if (string_child) {
-        children = [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.constructor === String || block_result.constructor === Number)) {
-          operabu[operabu.length - 1].push(block_result);
-        }
-        // console.log("internal_render popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-        children = operabu.pop();
-      }
-      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)));
-    };
-
     self.active_components = [];
 
     self.active_component = function() {
@@ -153,8 +59,127 @@ module React
       if (length === 0) { return null; };
       return self.active_redux_components[length-1];
     };
+
+    function isObject(obj) { return (obj && typeof obj === 'object'); }
+
+    self.merge_deep = function(one, two) {
+      return [one, two].reduce(function(pre, obj) {
+        Object.keys(obj).forEach(function(key){
+          let pVal = pre[key];
+          let oVal = obj[key];
+          if (Array.isArray(pVal) && Array.isArray(oVal)) {
+            pre[key] = pVal.concat.apply(this, oVal);
+          } else if (isObject(pVal) && isObject(oVal)) {
+            pre[key] = self.merge_deep(pVal, oVal);
+          } else {
+            pre[key] = oVal;
+          }
+        });
+        return pre;
+      }, {});
+    };
   }
 
+  if on_browser? || on_ssr?
+    %x{
+      self.to_native_react_props = function(ruby_style_props) {
+        let result = {};
+        let keys = ruby_style_props.$$keys;
+        let keys_length = keys.length;
+        let key = '';
+        for (let i = 0; i < keys_length; i++) {
+          key = keys[i];
+          let value = ruby_style_props.$$smap[key];
+          if (key[0] === 'o' && key[1] === 'n' && key[2] === '_') {
+            let type = typeof value;
+            if (type === "function") {
+              let active_c = self.active_component();
+              result[self.lower_camelize(key)] = function(event, info) {
+                let ruby_event = self.native_to_ruby_event(event);
+                #{`active_c.__ruby_instance`.instance_exec(`ruby_event`, `info`, &`value`)};
+              }
+            } else if (type === "object" && typeof value.$call === "function" ) {
+              if (!value.react_event_handler_function) {
+                value.react_event_handler_function = function(event, info) {
+                  let ruby_event = self.native_to_ruby_event(event);
+                  value.$call(ruby_event, info)
+                };
+              }
+              result[self.lower_camelize(key)] = value.react_event_handler_function;
+            } else if (type === "string" ) {
+              let active_component = self.active_component();
+              let method_ref;
+              let method_name = '$' + value;
+              if (typeof active_component[method_name] === "function") {
+                // got a ruby instance
+                if (active_component.native && active_component.native.method_refs && active_component.native.method_refs[value]) { method_ref = active_component.native.method_refs[value]; } // ruby instance with native
+                else if (active_component.method_refs && active_component.method_refs[value]) { method_ref = active_component.method_refs[value]; } // ruby function component
+                else { method_ref = active_component.$method_ref(value); } // create the ref
+              } else if (typeof active_component.__ruby_instance[method_name] === "function") {
+                // got a native instance
+                if (active_component.method_refs && active_component.method_refs[value]) { method_ref = active_component.method_refs[value]; }
+                else { method_ref = active_component.__ruby_instance.$method_ref(value); } // create ref for native
+              }
+              if (method_ref) {
+                if (!method_ref.react_event_handler_function) {
+                  method_ref.react_event_handler_function = function(event, info) {
+                    let ruby_event = self.native_to_ruby_event(event);
+                    method_ref.$call(ruby_event, info)
+                  };
+                }
+                result[self.lower_camelize(key)] = method_ref.react_event_handler_function;
+              } else {
+                let component_name;
+                if (active_component.__ruby_instance) { component_name = active_component.__ruby_instance.$to_s(); }
+                else { component_name = active_component.$to_s(); }
+                #{Isomorfeus.raise_error(message: "Is #{`value`} a valid method of #{`component_name`}? If so then please use: #{`key`}: method_ref(:#{`value`}) within component: #{`component_name`}")}
+              }
+            } else {
+              let active_component = self.active_component();
+              let component_name;
+              if (active_component.__ruby_instance) { component_name = active_component.__ruby_instance.$to_s(); }
+              else { component_name = active_component.$to_s(); }
+              #{Isomorfeus.raise_error(message: "Received invalid value for #{`key`} with #{`value`} within component: #{`component_name`}")}
+              console.error( + key + " event handler:", value, " within component:", self.active_component());
+            }
+          } else if (key[0] === 'a' && key.startsWith("aria_")) {
+            result[key.replace("_", "-")] = value;
+          } else if (key === "style") {
+            if (typeof value.$to_n === "function") { value = value.$to_n() }
+            result["style"] = value;
+          } else {
+            result[key.indexOf('_') > 0 ? self.lower_camelize(key) : key] = value;
+          }
+        }
+        return result;
+      };
+
+      self.render_block_result = function(block_result) {
+        if (block_result.constructor === String || block_result.constructor === Number) {
+          Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
+        }
+      };
+
+      self.internal_render = function(component, props, string_child, block) {
+        const operabu = self.render_buffer;
+        let children;
+        let native_props = null;
+        if (string_child) {
+          children = [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();
+        }
+        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
+
   def self.clone_element(ruby_react_element, props = nil, children = nil, &block)
     block_result = `null`
     if block_given?
@@ -185,9 +210,7 @@ module React
         operabu.push([]);
         // console.log("create_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
         let block_result = block.$call();
-        if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
-          operabu[operabu.length - 1].push(block_result);
-        }
+        if (block_result && block_result !== nil) { Opal.React.render_block_result(block_result); }
         // console.log("create_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
         children = operabu.pop();
       } else if (children === nil) { children = []; }

data/lib/react/component/features.rb

@@ -21,9 +21,7 @@ module React
             let block_result = block.$call()
             let last_buffer_length = operabu[operabu.length - 1].length;
             let last_buffer_element = operabu[operabu.length - 1][last_buffer_length - 1];
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
-              operabu[operabu.length - 1].push(block_result);
-            }
+            if (block_result && block_result !== nil) { Opal.React.render_block_result(block_result); }
           }
           // console.log("portal popping", operabu, operabu.toString());
           let result = operabu.pop();

data/lib/react/component/mixin.rb

@@ -5,7 +5,11 @@ module React
         base.include(::Native::Wrapper)
         base.extend(::React::Component::NativeComponentConstructor)
         base.extend(::LucidPropDeclaration::Mixin)
-        base.include(::React::Component::Elements)
+        if on_browser? || on_ssr?
+          base.include(::React::Component::Elements)
+        elsif on_mobile?
+          base.include(::ReactNative::Component::Elements)
+        end
         base.include(::React::Component::Api)
         base.include(::React::Component::Callbacks)
         base.include(::React::Component::Initializer)

data/lib/react/component/native_component_constructor.rb

@@ -43,12 +43,11 @@ module React
               // console.log("react component pushed", oper.render_buffer, oper.render_buffer.toString());
               oper.active_components.push(this);
               let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
-              if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+              if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
               // console.log("react component popping", oper.render_buffer, oper.render_buffer.toString());
               oper.active_components.pop();
               let result = oper.render_buffer.pop();
-              if (result.length === 1) { return result[0]; }
-              return result;
+              return (result.length === 1) ? result[0] : result;
             }
             shouldComponentUpdate(next_props, next_state) {
               if (base.should_component_update_block) {

data/lib/react/component/resolution.rb

@@ -3,13 +3,15 @@ module React
     module Resolution
       def self.included(base)
         base.instance_exec do
-          alias _react_component_class_resolution_original_const_missing const_missing
+          unless method_defined?(:_react_component_class_resolution_original_const_missing)
+            alias _react_component_class_resolution_original_const_missing const_missing
+          end
 
           def const_missing(const_name)
-            # language=JS
             %x{
               if (typeof Opal.global[const_name] !== "undefined" && (const_name[0] === const_name[0].toUpperCase())) {
                 var new_const = #{React::NativeConstantWrapper.new(`Opal.global[const_name]`, const_name)};
+                new_const.react_component = Opal.global[const_name];
                 #{Object.const_set(const_name, `new_const`)};
                 return new_const;
               } else {
@@ -20,7 +22,6 @@ module React
 
           # this is required for autoloading support, as the component may not be loaded and so its method is not registered.
           # must load it first, done by const_get, and next time the method will be there.
-
           unless method_defined?(:_react_component_class_resolution_original_method_missing)
             alias _react_component_class_resolution_original_method_missing method_missing
           end
@@ -28,36 +29,21 @@ module React
           def method_missing(component_name, *args, &block)
             # check for ruby component and render it
             # otherwise pass on method missing
-            # language=JS
             %x{
-              var modules = self.$to_s().split("::");
-              var modules_length = modules.length;
-              var module;
               var constant;
-              var component;
-              for (var i = modules_length; i > 0; i--) {
-                try {
-                  module = modules.slice(0, i).join('::');
-                  constant = self.$const_get(module).$const_get(component_name, false);
-                  if (typeof constant.react_component !== 'undefined') {
-                    component = constant.react_component;
-                    break;
-                  }
-                } catch(err) { component = null; }
-              }
-              if (!component) {
-                try {
-                  constant = Opal.Object.$const_get(component_name);
-                  if (typeof constant.react_component !== 'undefined') {
-                    component = constant.react_component;
-                  }
-                } catch(err) { component = null; }
-              }
-              if (component) {
-                return Opal.React.internal_prepare_args_and_render(component, args, block);
-              } else {
-                return #{_react_component_class_resolution_original_method_missing(component_name, *args, block)};
-              }
+              if (typeof self.iso_react_const_cache === 'undefined') { self.iso_react_const_cache = {}; }
+              try {
+                if (typeof self.iso_react_const_cache[component_name] !== 'undefined') {
+                  constant = self.iso_react_const_cache[component_name]
+                } else {
+                  constant = self.$const_get(component_name);
+                  self.iso_react_const_cache[component_name] = constant;
+                }
+                if (typeof constant.react_component !== 'undefined') {
+                  return Opal.React.internal_prepare_args_and_render(constant.react_component, args, block);
+                }
+              } catch(err) { }
+              return #{_react_component_class_resolution_original_method_missing(component_name, *args, block)};
             }
           end
         end
@@ -68,44 +54,42 @@ module React
       end
 
       def method_missing(component_name, *args, &block)
-        # html tags are defined as methods, so they will not end up here.
-        # first check for native component and render it, we want to be fast for native components
-        # second check for ruby component and render it, they are a bit slower anyway
-        # third pass on method missing
-        # language=JS
+        # Further on it must check for modules, because $const_get does not take
+        # the full nesting into account, as usually its called via $$ with the
+        # nesting provided by the compiler.
         %x{
-          var component = null;
-          if (typeof Opal.global[component_name] !== "undefined" && (component_name[0] === component_name[0].toUpperCase())) {
-            component = Opal.global[component_name];
+          var constant;
+          if (typeof self.iso_react_const_cache === 'undefined') { self.iso_react_const_cache = {}; }
+
+          if (typeof self.iso_react_const_cache[component_name] !== 'undefined') {
+            constant = self.iso_react_const_cache[component_name]
+          } else if (typeof self.$$is_a_module !== 'undefined') {
+            try {
+              constant = self.$const_get(component_name);
+              self.iso_react_const_cache[component_name] = constant;
+            } catch(err) { }
           } else {
-            var modules = self.$to_s().split("::");
-            var modules_length = modules.length;
-            var module;
-            var constant;
-            for (var i = modules_length; i > 0; i--) {
-              try {
-                module = modules.slice(0, i).join('::');
-                constant = self.$class().$const_get(module).$const_get(component_name, false);
-                if (typeof constant.react_component !== 'undefined') {
-                  component = constant.react_component;
+            let sc = self.$class();
+            try {
+              constant = sc.$const_get(component_name);
+              self.iso_react_const_cache[component_name] = constant;
+            } catch(err) {
+              var module_names = sc.$to_s().split("::");
+              var module_name;
+              for (var i = module_names.length - 1; i > 0; i--) {
+                module_name = module_names.slice(0, i).join('::');
+                try {
+                  constant = sc.$const_get(module_name).$const_get(component_name, false);
+                  self.iso_react_const_cache[component_name] = constant;
                   break;
-                }
-              } catch(err) { component = null; }
-            }
-            if (!component) {
-              try {
-                constant = Opal.Object.$const_get(component_name);
-                if (typeof constant.react_component !== 'undefined') {
-                  component = constant.react_component;
-                }
-              } catch(err) { component = null; }
+                } catch(err) { }
+              }
             }
           }
-          if (component) {
-            return Opal.React.internal_prepare_args_and_render(component, args, block);
-          } else {
-            return #{_react_component_resolution_original_method_missing(component_name, *args, block)};
+          if (constant && typeof constant.react_component !== 'undefined') {
+            return Opal.React.internal_prepare_args_and_render(constant.react_component, args, block);
           }
+          return #{_react_component_resolution_original_method_missing(component_name, *args, block)};
         }
       end
     end

data/lib/react/component/styles.rb

@@ -15,35 +15,14 @@ module React
         method_missing(prop, val)
       end
 
-      %x{
-        function isObject(obj) { return (obj && typeof obj === 'object'); }
-
-        function mergeDeep(one, two) {
-          return [one, two].reduce(function(pre, obj) {
-            Object.keys(obj).forEach(function(key){
-              let pVal = pre[key];
-              let oVal = obj[key];
-              if (Array.isArray(pVal) && Array.isArray(oVal)) {
-                pre[key] = pVal.concat.apply(this, oVal);
-              } else if (isObject(pVal) && isObject(oVal)) {
-                pre[key] = mergeDeep(pVal, oVal);
-              } else {
-                pre[key] = oVal;
-              }
-            });
-            return pre;
-          }, {});
-        }
-      }
-
       def deep_merge(a_hash)
         native_hash = a_hash.to_n
-        React::Component::Styles.new(`mergeDeep(#@native, native_hash)`)
+        React::Component::Styles.new(`Opal.React.merge_deep(#@native, native_hash)`)
       end
 
       def deep_merge!(a_hash)
         native_hash = a_hash.to_n
-        `#@native = mergeDeep(#@native, native_hash)`
+        `#@native = Opal.React.merge_deep(#@native, native_hash)`
         self
       end
 

data/lib/react/context_wrapper.rb

@@ -20,13 +20,11 @@ module React
             operabu.push([]);
             // console.log("consumer pushed", operabu, operabu.toString());
             let block_result = block.$call();
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
-              operabu[operabu.length - 1].push(block_result);
-            }
+            if (block_result && block_result !== nil) { Opal.React.render_block_result(block_result); }
             // console.log("consumer popping", operabu, operabu.toString());
             children = operabu.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; }
           }
           return children;
         });

data/lib/react/native_constant_wrapper.rb

@@ -8,7 +8,6 @@ module React
     end
 
     def method_missing(name, *args, &block)
-      # language=JS
       %x{
         if (name[0] === 'u' && name[1] === 's' && name[2] === 'e') {
           if (name.indexOf('_') > 0) { name = Opal.React.lower_camelize(name); }

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.13.6'
+  VERSION = '16.13.7'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.13.6
+  version: 16.13.7
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-08 00:00:00.000000000 Z
+date: 2020-03-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: concurrent-ruby
@@ -100,14 +100,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.0.22
+        version: 4.0.23
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.0.22
+        version: 4.0.23
 - !ruby/object:Gem::Dependency
   name: isomorfeus-speednode
   requirement: !ruby/object:Gem::Requirement
@@ -203,7 +203,6 @@ files:
 - lib/isomorfeus/thread_local_component_cache.rb
 - lib/isomorfeus/top_level.rb
 - lib/isomorfeus/top_level_ssr.rb
-- lib/isomorfeus/vivify_module.rb
 - lib/isomorfeus_react/lucid_app/api.rb
 - lib/isomorfeus_react/lucid_app/base.rb
 - lib/isomorfeus_react/lucid_app/mixin.rb

data/lib/isomorfeus/vivify_module.rb

@@ -1,43 +0,0 @@
-module Isomorfeus
-  class VivifyModule < ::Module
-    # this is required for autoloading support, as the component may not be loaded and so its method is not registered.
-    # must load it first, done by const_get, and next time the method will be there.
-    alias _react_component_class_resolution_original_method_missing method_missing
-
-    def method_missing(component_name, *args, &block)
-      # check for ruby component and render it
-      # otherwise pass on method missing
-      # language=JS
-      %x{
-        var constant;
-        var component = null;
-        var modules = self.$to_s().split("::");
-        var modules_length = modules.length;
-        var module;
-        for (var i = modules_length; i > 0; i--) {
-          try {
-            module = modules.slice(0, i).join('::');
-            constant = self.$const_get(module).$const_get(component_name, false);
-            if (typeof constant.react_component !== 'undefined') {
-              component = constant.react_component;
-              break;
-            }
-          } catch(err) { component = null; }
-        }
-        if (!component) {
-          try {
-            constant = Opal.Object.$const_get(component_name);
-            if (typeof constant.react_component !== 'undefined') {
-              component = constant.react_component;
-            }
-          } catch(err) { component = null; }
-        }
-        if (component) {
-          return Opal.React.internal_prepare_args_and_render(component, args, block);
-        } else {
-          return #{_react_component_class_resolution_original_method_missing(component_name, *args, block)};
-        }
-      }
-    end
-  end
-end