isomorfeus-react 16.9.16 → 16.9.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fedd5a6611c5c9231a56f9802567a284247618373ae46226a133e8d03e3f789b
-  data.tar.gz: c05a730ae10644277b7ba47d84ea5ee98b3a97e798ee545f7556ea0e7d81b8e6
+  metadata.gz: a78b7f6de2b24a82c500e35b74919f9e331bd0a7e4d797f355f79a755e855a07
+  data.tar.gz: 546561eced5206c1f8edf0dccdc11bcbfa5b665eb7404fe47b0722b311dd3176
 SHA512:
-  metadata.gz: f2c4754cad2588166596905a3b356f8661543e74a95a916425d41fec9a30453f12dfabcc778020e7a0afc99aed95091d62fd5b4fb4b357e1e39ba7bf4b932fb0
-  data.tar.gz: bfc8d7f044194d64b2ccec8fe550bfbdb1504e333ff8ee3361c59a00c08d8152abeb1315c206be220e728f9e8c8f313b300cd7990836bf092a288e97c992e823
+  metadata.gz: 8cdfc880b7a0a6ef1c5d2d6b7fb10ee5292be980311244d5e84347d7f8599856fa2a47ac0ee02ac7ae664fe56c5f512c5c3299774002b0d43e2feede6d00855c
+  data.tar.gz: e6d742909a28d9cd6ea1af7c0556c9301888b8af64742fa7e8f6e7f98bcc9b095d50626bb2f4351f153650bcbe0ad19cb27b9bd199f493bf44eb841724298142

data/lib/isomorfeus/react_view_helper.rb

@@ -2,6 +2,7 @@ module Isomorfeus
   module ReactViewHelper
     def mount_component(component_name, props = {}, asset = 'application_ssr.js')
       @ssr_response_status = nil
+      @ssr_styles = nil
       thread_id_asset = "#{Thread.current.object_id}#{asset}"
       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
@@ -74,14 +75,39 @@ module Isomorfeus
 
         # build javascript for second render pass
         javascript = <<~JAVASCRIPT
-          var rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)})
-          var application_state = global.Opal.Isomorfeus.store.native.getState();
+          let rendered_tree;
+          let ssr_styles;
+          let component;
+          if (typeof global.Opal.global.MuiStyles !== 'undefined' && typeof global.Opal.global.MuiStyles.ServerStyleSheets !== 'undefined') {
+            component = '#{component_name}'.split(".").reduce(function(o, x) {
+              return (o !== null && typeof o[x] !== "undefined" && o[x] !== null) ? o[x] : null;
+            }, global.Opal.global)
+            if (!component) { component = global.Opal.Isomorfeus.$cached_component_class('#{component_name}'); }
+            let sheets = new global.Opal.global.MuiStyles.ServerStyleSheets();
+            let app = global.Opal.React.$create_element(component, global.Opal.Hash.$new(#{Oj.dump(props, mode: :strict)}));
+            rendered_tree = global.Opal.global.ReactDOMServer.renderToString(sheets.collect(app));
+            ssr_styles = sheets.toString();
+          } else if (typeof global.Opal.global.ReactJSS !== 'undefined' && typeof global.Opal.global.ReactJSS.SheetsRegistry !== 'undefined') {
+            component = '#{component_name}'.split(".").reduce(function(o, x) {
+              return (o !== null && typeof o[x] !== "undefined" && o[x] !== null) ? o[x] : null;
+            }, global.Opal.global)
+            if (!component) { component = global.Opal.Isomorfeus.$cached_component_class('#{component_name}'); }
+            let sheets = new global.Opal.global.ReactJSS.SheetsRegistry();
+            let generate_id = global.Opal.global.ReactJSS.createGenerateId();
+            let app = global.Opal.React.$create_element(component, global.Opal.Hash.$new(#{Oj.dump(props, mode: :strict)}));
+            let element = global.Opal.global.React.createElement(global.Opal.global.ReactJSS.JssProvider, { registry: sheets, generateId: generate_id }, app);
+            rendered_tree = global.Opal.global.ReactDOMServer.renderToString(element);
+            ssr_styles = sheets.toString();
+          } else {
+            rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)});
+          }
+          let application_state = global.Opal.Isomorfeus.store.native.getState();
           if (typeof global.Opal.Isomorfeus.Transport !== 'undefined') { global.Opal.Isomorfeus.Transport.$disconnect(); }
-          return [rendered_tree, application_state, global.Opal.Isomorfeus['$ssr_response_status']()];
+          return [rendered_tree, application_state, ssr_styles, global.Opal.Isomorfeus['$ssr_response_status']()];
         JAVASCRIPT
 
         # execute second render pass
-        rendered_tree, application_state, @ssr_response_status = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
+        rendered_tree, application_state, @ssr_styles, @ssr_response_status = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
 
         # build result
         render_result << " data-iso-nloc='#{props[:locale]}' data-iso-state='#{Oj.dump(application_state, mode: :strict)}'>"
@@ -96,5 +122,9 @@ module Isomorfeus
     def ssr_response_status
       @ssr_response_status || 200
     end
+
+    def ssr_styles
+      @ssr_styles || ''
+    end
   end
 end

data/lib/isomorfeus/top_level_ssr.rb

@@ -8,10 +8,20 @@ module Isomorfeus
         # nothing, but keep it for compatibility with browser
       end
 
-      def render_component_to_string(component_name, props_json)
-        # for some reason props_json arrives already decoded
-        component = Isomorfeus.cached_component_class(component_name)
-        ReactDOMServer.render_to_string(React.create_element(component, `Opal.Hash.$new(props_json)`))
+      def render_component_to_string(component_name, props)
+        component = nil
+        %x{
+          if (typeof component_name === 'string' || component_name instanceof String) {
+            component = component_name.split(".").reduce(function(o, x) {
+              return (o !== null && typeof o[x] !== "undefined" && o[x] !== null) ? o[x] : null;
+            }, Opal.global)
+          } else {
+            component = component_name;
+          }
+        }
+        component = Isomorfeus.cached_component_class(component_name) unless component
+
+        ReactDOMServer.render_to_string(React.create_element(component, `Opal.Hash.$new(props)`))
       end
     end
   end

data/lib/lucid_app/native_component_constructor.rb

@@ -64,11 +64,7 @@ module LucidApp
           }
           listener() {
             let next_state = Opal.Isomorfeus.store.native.getState();
-            let current_ruby_state = Opal.Hash.$new(this.state.isomorfeus_store_state);
-            let next_ruby_state = Opal.Hash.$new(next_state);
-            if (#{`next_ruby_state` != `current_ruby_state`}) {
-              this.setState({ isomorfeus_store_state: next_state });
-            }
+            this.setState({ isomorfeus_store_state: next_state });
           }
           componentWillUnmount() {
             if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
@@ -80,13 +76,15 @@ module LucidApp
           }
         }
         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?"]()) {
+            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); }
               base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);

data/lib/lucid_component/app_store_proxy.rb

@@ -6,7 +6,6 @@ module LucidComponent
     end
 
     def method_missing(key, *args, &block)
-      @native_component_instance.JS.register_used_store_path(['application_state', key])
       if `args.length > 0`
         # set class state, simply a dispatch
         action = { type: 'APPLICATION_STATE', name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }

data/lib/lucid_component/class_store_proxy.rb

@@ -7,7 +7,6 @@ module LucidComponent
     end
 
     def method_missing(key, *args, &block)
-      @native_component_instance.JS.register_used_store_path(['component_class_state', @component_name, key])
       if `args.length > 0`
         # set class state, simply a dispatch
         action = { type: 'COMPONENT_CLASS_STATE', class: @component_name, name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }

data/lib/lucid_component/instance_store_proxy.rb

@@ -7,7 +7,6 @@ module LucidComponent
     end
 
     def method_missing(key, *args, &block)
-      @native_component_instance.JS.register_used_store_path(['component_state', @component_object_id, key])
       if `args.length > 0`
         # set instance state, simply a dispatch
 

data/lib/lucid_component/native_component_constructor.rb

@@ -45,17 +45,13 @@ module LucidComponent
             Opal.React.render_buffer.push([]);
             Opal.React.active_components.push(this);
             Opal.React.active_redux_components.push(this);
-            this.used_store_paths = [];
             #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
             Opal.React.active_redux_components.pop();
             Opal.React.active_components.pop();
             return Opal.React.render_buffer.pop();
           }
           data_access() {
-            return this.props.isomorfeus_store
-          }
-          register_used_store_path(path) {
-            this.used_store_paths.push(path);
+            return this.context;
           }
           shouldComponentUpdate(next_props, next_state) {
             var next_props_keys = Object.keys(next_props);
@@ -66,14 +62,8 @@ module LucidComponent
             var this_state_keys = Object.keys(this.state);
             if (next_state_keys.length !== this_state_keys.length) { return true; }
 
-            var used_store_result;
             for (var property in next_props) {
-              if (property === "isomorfeus_store") {
-                used_store_result = this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store);
-                if (used_store_result) {
-                  return true;
-                }
-              } else if (next_props.hasOwnProperty(property)) {
+              if (next_props.hasOwnProperty(property)) {
                 if (!this.props.hasOwnProperty(property)) { return true; };
                 if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
                 else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
@@ -95,27 +85,6 @@ module LucidComponent
             }
             return false;
           }
-          scu_for_used_store_paths(self, current_state, next_state) {
-            var unique_used_store_paths = self.used_store_paths.filter(function(elem, pos, paths) {
-              return (paths.indexOf(elem) === pos);
-            });
-            var used_length = unique_used_store_paths.length;
-            var store_path;
-            var current_value;
-            var next_value;
-            var store_path_last;
-            for (var i = 0; i < used_length; i++) {
-              store_path = unique_used_store_paths[i];
-              store_path_last = store_path.length - 1;
-              if (store_path[store_path_last].constructor === Array) {
-                store_path[store_path_last] = JSON.stringify(store_path[store_path_last]);
-              }
-              current_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, current_state);
-              next_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, next_state);
-              if (current_value !== next_value) { return true; };
-            }
-            return false;
-          }
           validateProp(props, propName, componentName) {
             try { base.$validate_prop(propName, props[propName]) }
             catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
@@ -124,12 +93,14 @@ module LucidComponent
         }
         base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
         base.jss_styles = null;
+        base.jss_styles_used = null;
         base.use_styles = null;
         base.react_component = function(props) {
           let classes = null;
           let theme = Opal.global.ReactJSS.useTheme();
           if (base.jss_styles) {
-            if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
+            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); }
               base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);

data/lib/lucid_material/app/native_component_constructor.rb

@@ -65,12 +65,7 @@ module LucidMaterial
             }
             listener() {
               var next_state = Opal.Isomorfeus.store.native.getState();
-              var current_ruby_state = Opal.Hash.$new(this.state.isomorfeus_store_state);
-              var next_ruby_state = Opal.Hash.$new(next_state);
-              if (#{`next_ruby_state` != `current_ruby_state`}) {
-                var self = this;
-                /* setTimeout(function() { */ self.setState({ isomorfeus_store_state: next_state }); /*}, 0 ); */
-              }
+              this.setState({ isomorfeus_store_state: next_state });
             }
             componentWillUnmount() {
               if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
@@ -82,13 +77,15 @@ module LucidMaterial
             }
           }
           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.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
+              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); }
                 base.use_styles = Opal.global.MuiStyles.makeStyles(styles);

data/lib/lucid_material/component/native_component_constructor.rb

@@ -46,17 +46,13 @@ module LucidMaterial
               Opal.React.render_buffer.push([]);
               Opal.React.active_components.push(this);
               Opal.React.active_redux_components.push(this);
-              this.used_store_paths = [];
               #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
               Opal.React.active_redux_components.pop();
               Opal.React.active_components.pop();
               return Opal.React.render_buffer.pop();
             }
             data_access() {
-              return this.props.isomorfeus_store
-            }
-            register_used_store_path(path) {
-              this.used_store_paths.push(path);
+              return this.context;
             }
             shouldComponentUpdate(next_props, next_state) {
               var next_props_keys = Object.keys(next_props);
@@ -67,14 +63,8 @@ module LucidMaterial
               var this_state_keys = Object.keys(this.state);
               if (next_state_keys.length !== this_state_keys.length) { return true; }
 
-              var used_store_result;
               for (var property in next_props) {
-                if (property === "isomorfeus_store") {
-                  used_store_result = this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store);
-                  if (used_store_result) {
-                    return true;
-                  }
-                } else if (next_props.hasOwnProperty(property)) {
+                if (next_props.hasOwnProperty(property)) {
                   if (!this.props.hasOwnProperty(property)) { return true; };
                   if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
                   else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
@@ -96,27 +86,6 @@ module LucidMaterial
               }
               return false;
             }
-            scu_for_used_store_paths(self, current_state, next_state) {
-              var unique_used_store_paths = self.used_store_paths.filter(function(elem, pos, paths) {
-                return (paths.indexOf(elem) === pos);
-              });
-              var used_length = unique_used_store_paths.length;
-              var store_path;
-              var current_value;
-              var next_value;
-              var store_path_last;
-              for (var i = 0; i < used_length; i++) {
-                store_path = unique_used_store_paths[i];
-                store_path_last = store_path.length - 1;
-                if (store_path[store_path_last].constructor === Array) {
-                  store_path[store_path_last] = JSON.stringify(store_path[store_path_last]);
-                }
-                current_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, current_state);
-                next_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, next_state);
-                if (current_value !== next_value) { return true; };
-              }
-              return false;
-            }
             validateProp(props, propName, componentName) {
               try { base.$validate_prop(propName, props[propName]) }
               catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
@@ -125,12 +94,14 @@ module LucidMaterial
           };
           base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
           base.jss_styles = null;
+          base.jss_styles_used = null;
           base.use_styles = null;
           base.react_component = function(props) {
             let classes = null;
             let theme = Opal.global.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
+              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); }
                 base.use_styles = Opal.global.MuiStyles.makeStyles(styles);

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.9.16'
+  VERSION = '16.9.17'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.9.16
+  version: 16.9.17
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-08-27 00:00:00.000000000 Z
+date: 2019-08-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: oj
@@ -86,14 +86,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.0.11
+        version: 4.0.12
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.0.11
+        version: 4.0.12
 - !ruby/object:Gem::Dependency
   name: isomorfeus-speednode
   requirement: !ruby/object:Gem::Requirement