isomorfeus-react 16.10.11 → 16.10.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b582b0caa6641807ee00e77f9436a833bd0c2953352e600074d1c93e13acd87c
-  data.tar.gz: 7b8a12ecb6b899f1322f77fb57174a730fd3ddbc102dc2c19bf031ac346e250e
+  metadata.gz: 212995320dc44b1d0044e78018b806842eac6f3a9e9de729276cfdece8678547
+  data.tar.gz: c1b472d9c8e77c452d2f6ebdd479afe798e1a4a6b51e3e7d544066331369be4f
 SHA512:
-  metadata.gz: 1a0a4782ac893e043a5d5011960bd7c6187fa03aabf5a881ca2df185aafaafe763799b6ce918b56d2db6339aaa97683e3c7804b29de1811e5ecf6dbf4a43ad97
-  data.tar.gz: 71c749cd488daff5527daed9c54c7db114dde2b9568b032a0db9e07be56c91f8cd0f937c720bf314ee6800102318f132fa0c0d597be50e2bb671e0ef1e4905df
+  metadata.gz: '00188bcb28282e7ad13198b3b0e3bf2d1faa28895df3a4488e51cb068adbcc27a033fa41c20243f6278b74cd31bdb885b31c793d022c5db841945031d14cd36d'
+  data.tar.gz: 56313a58b6a58c0c76e01f0e9844555842ce22c28db06f778615ee6d7c38b0326bfa2c57d71171f2a4d0c43447b64971b93e20fc738bc0df15c47fe92fec7318

data/lib/isomorfeus-react.rb

@@ -85,6 +85,7 @@ if RUBY_ENGINE == 'opal'
   LucidApp::Context.create_application_context
 
   # LucidComponent
+  require 'lucid_component/environment_support'
   require 'lucid_component/styles_support'
   require 'lucid_component/store_api'
   require 'lucid_component/app_store_defaults'
@@ -95,7 +96,7 @@ if RUBY_ENGINE == 'opal'
   require 'lucid_component/instance_store_proxy'
   require 'lucid_component/initializer'
   require 'lucid_component/native_component_constructor'
-  require 'lucid_component/event_handler'
+  require 'lucid_component/preloading_support'
   require 'lucid_component/mixin'
   require 'lucid_component/base'
 
@@ -123,11 +124,9 @@ else
 
   Isomorfeus.env = ENV['RACK_ENV']
 
-  if Isomorfeus.production? || Isomorfeus.test?
-    Isomorfeus.server_side_rendering = true
-  else
-    Isomorfeus.server_side_rendering = false
-  end
+  require 'net/http' if Isomorfeus.development?
+
+  Isomorfeus.server_side_rendering = true
 
   require 'isomorfeus/react_view_helper'
 

data/lib/isomorfeus/react_view_helper.rb

@@ -7,15 +7,32 @@ module Isomorfeus
       render_result = "<div data-iso-env=\"#{Isomorfeus.env}\" data-iso-root=\"#{component_name}\" data-iso-props='#{Oj.dump(props, mode: :strict)}'"
       if Isomorfeus.server_side_rendering
 
-        # initialize speednode context
-        unless Isomorfeus.ssr_contexts.key?(thread_id_asset)
-          asset_file_name = OpalWebpackLoader::Manifest.lookup_path_for(asset)
-          asset_path = File.join('public', asset_file_name)
-          Isomorfeus.ssr_contexts[thread_id_asset] = ExecJS.permissive_compile(File.read(asset_path))
+        if Isomorfeus.development?
+          # always create a new context, effectively reloading code
+          # delete the existing context first, saves memory
+          if Isomorfeus.ssr_contexts.key?(thread_id_asset)
+            uuid = Isomorfeus.ssr_contexts[thread_id_asset].instance_variable_get(:@uuid)
+            runtime = Isomorfeus.ssr_contexts[thread_id_asset].instance_variable_get(:@runtime)
+            runtime.vm.delete_context(uuid)
+          end
+          asset_path = "#{OpalWebpackLoader.client_asset_path}#{asset}"
+          asset = Net::HTTP.get(URI(asset_path))
+          Isomorfeus.ssr_contexts[thread_id_asset] = ExecJS.permissive_compile(asset)
+        else
+          # initialize speednode context
+          unless Isomorfeus.ssr_contexts.key?(thread_id_asset)
+            asset_file_name = OpalWebpackLoader::Manifest.lookup_path_for(asset)
+            asset_path = File.join('public', asset_file_name)
+            Isomorfeus.ssr_contexts[thread_id_asset] = ExecJS.permissive_compile(File.read(asset_path))
+          end
         end
 
         # build javascript for rendering first pass
+        # it will initialize buffers to guard against leaks, maybe caused by previous exceptions
         javascript = <<~JAVASCRIPT
+          global.Opal.React.render_buffer = [];
+          global.Opal.React.active_components = [];
+          global.Opal.React.active_redux_components = [];
           global.FirstPassFinished = false;
           global.Opal.Isomorfeus['$env=']('#{Isomorfeus.env}');
           if (typeof global.Opal.Isomorfeus.$negotiated_locale === 'function') {
@@ -74,7 +91,11 @@ module Isomorfeus
         end
 
         # build javascript for second render pass
+        # guard against leaks from first pass, maybe because of a exception
         javascript = <<~JAVASCRIPT
+          global.Opal.React.render_buffer = [];
+          global.Opal.React.active_components = [];
+          global.Opal.React.active_redux_components = [];
           let rendered_tree;
           let ssr_styles;
           let component;

data/lib/lucid_app/mixin.rb

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

data/lib/lucid_app/native_component_constructor.rb

@@ -63,7 +63,9 @@ module LucidApp
             // 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);
-            let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+            let block_result;
+            if (base.preload_block && !this.state.preloaded && base.while_loading_block) { 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)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
             Opal.React.active_redux_components.pop();
             Opal.React.active_components.pop();
@@ -87,18 +89,19 @@ module LucidApp
             return null;
           }
         }
+        base.preload_block = null;
+        base.while_loading_block = null;
         base.jss_styles = null;
-        base.jss_styles_used = null;
         base.jss_theme = {};
         base.use_styles = null;
         base.themed_react_component = function(props) {
           let classes = null;
           let theme = Opal.global.ReactJSS.useTheme();
           if (base.jss_styles) {
-            if (!base.use_styles || (Opal.Isomorfeus.development && !Object.is(base.jss_styles, base.jss_styles_used))) {
-              base.jss_styles_used = base.jss_styles;
-              let styles = base.jss_styles
-              if (typeof styles === 'function') { styles = styles(theme); }
+            if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+              let styles;
+              if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
+              else { styles = base.jss_styles; }
               base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
             }
             classes = base.use_styles();

data/lib/lucid_component/environment_support.rb

@@ -0,0 +1,11 @@
+module LucidComponent
+  module EnvironmentSupport
+    def on_browser?
+      Isomorfeus.on_browser?
+    end
+
+    def on_ssr?
+      Isomorfeus.on_ssr?
+    end
+  end
+end

data/lib/lucid_component/mixin.rb

@@ -4,7 +4,10 @@ module LucidComponent
       base.include(::Native::Wrapper)
       base.extend(::LucidComponent::NativeComponentConstructor)
       base.extend(::LucidPropDeclaration::Mixin)
-      base.extend(::LucidComponent::EventHandler)
+      base.extend(::React::Component::EventHandler)
+      base.extend(::LucidComponent::PreloadingSupport)
+      base.extend(::LucidComponent::EnvironmentSupport)
+      base.include(::LucidComponent::EnvironmentSupport)
       base.include(::React::Component::Elements)
       base.include(::React::Component::API)
       base.include(::React::Component::Callbacks)

data/lib/lucid_component/native_component_constructor.rb

@@ -50,7 +50,9 @@ module LucidComponent
             // 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);
-            let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+            let block_result;
+            if (base.preload_block && !this.state.preloaded && base.while_loading_block) { 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)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
             Opal.React.active_redux_components.pop();
             Opal.React.active_components.pop();
@@ -94,8 +96,9 @@ module LucidComponent
             return null;
           }
         }
+        base.preload_block = null;
+        base.while_loading_block = null;
         base.jss_styles = null;
-        base.jss_styles_used = null;
         base.use_styles = null;
         base.store_updates = true;
         base.react_component = function(props) {
@@ -104,10 +107,10 @@ module LucidComponent
           if (base.store_updates) { store = Opal.global.React.useContext(Opal.global.LucidApplicationContext); }
           let theme = Opal.global.ReactJSS.useTheme();
           if (base.jss_styles) {
-            if (!base.use_styles || (Opal.Isomorfeus.development && !Object.is(base.jss_styles, base.jss_styles_used))) {
-              base.jss_styles_used = base.jss_styles;
-              let styles = base.jss_styles
-              if (typeof styles === 'function') { styles = base.jss_styles(theme); }
+            if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+              let styles;
+              if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
+              else { styles = base.jss_styles; }
               base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
             }
             classes = base.use_styles();

data/lib/lucid_component/preloading_support.rb

@@ -0,0 +1,16 @@
+module LucidComponent
+  module PreloadingSupport
+    def preload(&block)
+      `self.preload_block = block`
+      component_did_mount do
+        instance_exec(&self.class().JS[:preload_block]).then do
+          set_state({preloaded: true})
+        end
+      end
+    end
+
+    def while_loading(&block)
+      `self.while_loading_block = block`
+    end
+  end
+end

data/lib/lucid_material/app/mixin.rb

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

data/lib/lucid_material/app/native_component_constructor.rb

@@ -64,7 +64,9 @@ module LucidMaterial
               // 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);
-              let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              let block_result;
+              if (base.preload_block && !this.state.preloaded && base.while_loading_block) { 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)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
               Opal.React.active_redux_components.pop();
               Opal.React.active_components.pop();
@@ -88,18 +90,19 @@ module LucidMaterial
               return null;
             }
           }
+          base.preload_block = null;
+          base.while_loading_block = null;
           base.jss_styles = null;
-          base.jss_styles_used = null;
           base.jss_theme = Opal.global.Mui.createMuiTheme();
           base.use_styles = null;
           base.themed_react_component = function(props) {
             let classes = null;
             let theme = Opal.global.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || (Opal.Isomorfeus.development && !Object.is(base.jss_styles, base.jss_styles_used))) {
-                base.jss_styles_used = base.jss_styles;
-                let styles = base.jss_styles
-                if (typeof styles === 'function') { styles = styles(theme); }
+              if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+                let styles;
+                if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
+                else { styles = base.jss_styles; }
                 base.use_styles = Opal.global.MuiStyles.makeStyles(styles);
               }
               classes = base.use_styles();

data/lib/lucid_material/component/mixin.rb

@@ -5,7 +5,10 @@ module LucidMaterial
         base.include(::Native::Wrapper)
         base.extend(::LucidMaterial::Component::NativeComponentConstructor)
         base.extend(::LucidPropDeclaration::Mixin)
-        base.extend(::LucidComponent::EventHandler)
+        base.extend(::React::Component::EventHandler)
+        base.extend(::LucidComponent::PreloadingSupport)
+        base.extend(::LucidComponent::EnvironmentSupport)
+        base.include(::LucidComponent::EnvironmentSupport)
         base.include(::React::Component::Elements)
         base.include(::React::Component::API)
         base.include(::React::Component::Callbacks)
@@ -17,4 +20,4 @@ module LucidMaterial
       end
     end
   end
-end
+end

data/lib/lucid_material/component/native_component_constructor.rb

@@ -51,7 +51,9 @@ module LucidMaterial
               // 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);
-              let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              let block_result;
+              if (base.preload_block && !this.state.preloaded && base.while_loading_block) { 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)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
               Opal.React.active_redux_components.pop();
               Opal.React.active_components.pop();
@@ -95,8 +97,9 @@ module LucidMaterial
               return null;
             }
           };
+          base.preload_block = null;
+          base.while_loading_block = null;
           base.jss_styles = null;
-          base.jss_styles_used = null;
           base.use_styles = null;
           base.store_updates = true;
           base.react_component = function(props) {
@@ -105,10 +108,10 @@ 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 && !Object.is(base.jss_styles, base.jss_styles_used))) {
-                base.jss_styles_used = base.jss_styles;
-                let styles = base.jss_styles
-                if (typeof styles === 'function') { styles = styles(theme); }
+              if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+                let styles;
+                if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
+                else { styles = base.jss_styles; }
                 base.use_styles = Opal.global.MuiStyles.makeStyles(styles);
               }
               classes = base.use_styles();

data/lib/react.rb

@@ -1,6 +1,4 @@
 module React
-  # to_native_react_props: the native_component params is used for event handlers, it keeps the event handlers
-  # it does not need to be compone nt, can be a object with the event handlers
   # language=JS
   %x{
     self.render_buffer = [];
@@ -15,10 +13,10 @@ module React
     };
 
     self.lower_camelize = function(snake_cased_word) {
-      var parts = snake_cased_word.split('_');
-      var res = parts[0];
-      for (var i = 1; i < parts.length; i++) {
-            res += parts[i][0].toUpperCase() + parts[i].slice(1);
+      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);
       }
       return res;
     };
@@ -30,36 +28,36 @@ module React
     };
 
     self.to_native_react_props = function(ruby_style_props) {
-        var result = {};
-        var keys = ruby_style_props.$keys();
-        var keys_length = keys.length;
-        let key;
-        for (var i = 0; i < keys_length; i++) {
-          key = keys[i];
-          if (key[0] === 'o' && key[1] === 'n' && key[2] === '_') {
-            var handler = ruby_style_props['$[]'](key);
-            if (typeof handler === "function") {
-              result[Opal.React.lower_camelize(key)] = handler;
-            } else {
-              var active_component = Opal.React.active_component();
-              result[Opal.React.lower_camelize(key)] = active_component[handler];
-            }
-          } else if (key[0] === 'a' && key.startsWith("aria_")) {
-            result[key.replace("_", "-")] = ruby_style_props['$[]'](key);
-          } else if (key === "style") {
-            var val = ruby_style_props['$[]'](key);
-            if (typeof val.$to_n === "function") { val = val.$to_n() }
-            result["style"] = val;
+      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);
+          if (typeof handler === "function") {
+            result[Opal.React.lower_camelize(key)] = handler;
           } else {
-            result[key.indexOf('_') > 0 ? Opal.React.lower_camelize(key) : key] = ruby_style_props['$[]'](key);
+            let active_component = Opal.React.active_component();
+            result[Opal.React.lower_camelize(key)] = active_component[handler];
           }
+        } 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 ? Opal.React.lower_camelize(key) : key] = ruby_style_props['$[]'](key);
         }
-        return result;
+      }
+      return result;
     };
 
     self.internal_prepare_args_and_render = function(component, args, block) {
       if (args.length > 0) {
-        var last_arg = args[args.length - 1];
+        let last_arg = args[args.length - 1];
         if (last_arg && last_arg.constructor === String) {
           if (args.length === 1) { return Opal.React.internal_render(component, null, last_arg, null); }
           else { Opal.React.internal_render(component, args[0], last_arg, null); }
@@ -94,7 +92,7 @@ module React
     self.active_components = [];
 
     self.active_component = function() {
-      var length = Opal.React.active_components.length;
+      let length = Opal.React.active_components.length;
       if (length === 0) { return null; };
       return Opal.React.active_components[length-1];
     };
@@ -102,7 +100,7 @@ module React
     self.active_redux_components = [];
 
     self.active_redux_component = function() {
-      var length = Opal.React.active_redux_components.length;
+      let length = Opal.React.active_redux_components.length;
       if (length === 0) { return null; };
       return Opal.React.active_redux_components[length-1];
     };

data/lib/react/component/callbacks.rb

@@ -18,13 +18,22 @@ module React
 
           def component_did_mount(&block)
             %x{
-              var fun = function() {
+              let fun = function() {
                 Opal.React.active_redux_components.push(this.__ruby_instance);
                 #{`this.__ruby_instance`.instance_exec(&block)};
                 Opal.React.active_redux_components.pop();
               }
-              if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidMount = fun; }
-              else { self.react_component.prototype.componentDidMount = fun; }
+              if (self.lucid_react_component) {
+                if (self.lucid_react_component.prototype.componentDidMount) {
+                  let fun_one = self.lucid_react_component.prototype.componentDidMount;
+                  let fun_two = fun;
+                  fun = function() {
+                    fun_one();
+                    fun_two();
+                  }
+                }
+                self.lucid_react_component.prototype.componentDidMount = fun;
+              } else { self.react_component.prototype.componentDidMount = fun; }
             }
           end
 

data/lib/react/component/event_handler.rb

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

data/lib/react/component/props.rb

@@ -1,7 +1,9 @@
 module React
   module Component
     class Props
-      include ::Native::Wrapper
+      def initialize(native)
+        @native = native
+      end
 
       def method_missing(prop, *args, &block)
         %x{
@@ -14,11 +16,11 @@ module React
       end
 
       def classes
-        @classes ||= `Opal.React.Component.Styles.$new(#@native.props.classes)`
+        @classes ||= `Opal.React.Component.Styles.$new(#@native, 'classes')`
       end
 
       def theme
-        @theme ||= `Opal.React.Component.Styles.$new(#@native.props.theme)`
+        @theme ||= `Opal.React.Component.Styles.$new(#@native, 'theme')`
       end
 
       def isomorfeus_store

data/lib/react/component/styles.rb

@@ -1,14 +1,21 @@
 module React
   module Component
     class Styles
-      def initialize(native)
+      def initialize(native, props_prop = false)
         @native = native
+        @props_prop = props_prop
       end
 
       def method_missing(prop, *args, &block)
         %x{
-          if (!#@native || typeof #@native[prop] === 'undefined') { return #{nil}; }
-          let value = #@native[prop];
+          let value;
+          if (#@props_prop) {
+            if (!#@native.props[#@props_prop] || typeof #@native.props[#@props_prop][prop] === 'undefined') { return #{nil}; }
+            value = #@native.props[#@props_prop][prop];
+          } else {
+            if (!#@native || typeof #@native[prop] === 'undefined') { return #{nil}; }
+            value = #@native[prop];
+          }
           if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value)) { return value; }
           if (typeof value === 'function') { return #{Proc.new { `value()` }} }
           return Opal.React.Component.Styles.$new(value);
@@ -16,12 +23,18 @@ module React
       end
 
       def to_h
-        `Opal.Hash.$new(#@native)`
+        %x{
+          if (#@props_prop) { return Opal.Hash.$new(#@native.props[#@props_prop]); }
+          else { return Opal.Hash.$new(#@native); }
+        }
       end
 
       def to_n
-        @native
+        %x{
+          if (#@props_prop) { return #@native.props[#@props_prop]; }
+          else { return #@native; }
+        }
       end
     end
   end
-end
+end

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.10.11'
+  VERSION = '16.10.12'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.10.11
+  version: 16.10.12
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-10-13 00:00:00.000000000 Z
+date: 2019-10-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: oj
@@ -185,11 +185,12 @@ files:
 - lib/lucid_component/class_store_proxy.rb
 - lib/lucid_component/component_class_store_defaults.rb
 - lib/lucid_component/component_instance_store_defaults.rb
-- lib/lucid_component/event_handler.rb
+- lib/lucid_component/environment_support.rb
 - lib/lucid_component/initializer.rb
 - lib/lucid_component/instance_store_proxy.rb
 - lib/lucid_component/mixin.rb
 - lib/lucid_component/native_component_constructor.rb
+- lib/lucid_component/preloading_support.rb
 - lib/lucid_component/reducers.rb
 - lib/lucid_component/store_api.rb
 - lib/lucid_component/styles_support.rb
@@ -240,7 +241,14 @@ homepage: http://isomorfeus.com
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message: |2+
+
+  isomorfeus-react 16.10.12:
+  Breaking changes:
+  Server Side Rendering is on by default in the development environment.
+  Please enable SSR asset builds in the webpack config of your app or turn SSR off with:
+  Isomorfeus.server_side_rendering = false
+
 rdoc_options: []
 require_paths:
 - lib

data/lib/lucid_component/event_handler.rb

@@ -1,21 +0,0 @@
-module LucidComponent
-  module EventHandler
-    def event_handlers
-      @event_handlers ||= []
-    end
-
-    def event_handler(name, &block)
-      event_handlers << name
-      %x{
-        self.lucid_react_component.prototype[name] = function(event, info) {
-          if (typeof event === "object") {
-            #{ruby_event = ::React::SyntheticEvent.new(`event`)};
-          } else {
-            #{ruby_event = `event`};
-          }
-          #{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
-        }
-      }
-    end
-  end
-end