isomorfeus-react 16.10.8 → 16.10.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4e282b6791c9a739cde5039e051d9edc78d54fb39a8b6cd1e8c90f4d8f9007d
-  data.tar.gz: b8358d33d9cbb221829053bae6f84f33941a5007db32ea8dfef7e3d11cc0cd84
+  metadata.gz: a4f48aa681e4ef082360632f0cc00170e2fef45dcb74cae9abcbedbec13cb60b
+  data.tar.gz: c778e71574479ec8111c52c571f01df750c84b03d114820fff4a4b1aee350465
 SHA512:
-  metadata.gz: eb43c54e03a5cba4a31f8ab3cff891b49e84a578e0e17956a48745196df6129b00e1d6e56d4bc9d65c86dab6d6df6def5d99e634eddef0bcdf9d31b69f13720f
-  data.tar.gz: 717d220b8d9bdf184a0632f979ecc84ef7e2ae3d211a7c1d9e28b78ea7610b7e4d4b05dce8978cd2e010ee59001271857be3186b12f8c805b8f36b9584039d12
+  metadata.gz: c244ba0c1a51df15754fbc00aa1e7e6afc0c9d3880004816fbabc0f52870431937cbd40b2302e683820094fca342225cdcb596c4cf0adfe333db3e929c2a4053
+  data.tar.gz: fdaaf7afd00c1885c4ff5d1bb623b2c22146a76ab8dc077c0ead3276f5bdc36c6548b01d28560db476406f92e1b3f8caf76a87b09e91656e4856bde4f90f4173

data/README.md

@@ -5,9 +5,19 @@ Develop React components for Opal Ruby along with very easy to use and advanced
 ## Community and Support
 At the [Isomorfeus Framework Project](http://isomorfeus.com) 
 
-## Versioning
+## Versioning and Compatibility
 isomorfeus-react version follows the React version which features and API it implements.
-Isomorfeus-react 16.8.x implements features and the API of React 16.8 and should be used with React 16.8
+
+### React
+Isomorfeus-react 16.10.x implements features and the API of React 16.8 and should be used with React 16.10
+
+### Preact
+isomorfeus-react works with preact version 10.0.x.
+
+### Nerv
+isomorfeus-react works in general with nervjs 1.4.x. with some issues:
+ - Server Side Rendering does currently not work at all.
+ - Some specs with respect to callbacks (component_will_unmount) and styles fail.
 
 ## Documentation
 

data/lib/isomorfeus-react.rb

@@ -1,11 +1,11 @@
 if RUBY_ENGINE == 'opal'
-  require 'opal'
-  require 'opal-autoloader'
-  require 'native'
-  require 'promise'
-  require 'active_support/core_ext/string'
-  require 'react/active_support_support'
+  # require 'opal'
+  # require 'native'
+  # require 'promise'
+  # rely on i-redux to have included above reqiorements
   require 'isomorfeus-redux'
+  require 'active_support/core_ext/string'
+  require 'opal-autoloader'
 
   if Isomorfeus.on_browser?
     require 'browser/event'

data/lib/isomorfeus/react_view_helper.rb

@@ -83,23 +83,35 @@ module Isomorfeus
               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();
+            try {
+              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();
+            } catch (e) {
+              rendered_tree = e.message + "\\n" + e.stack;
+            }
           } 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();
+            try {
+              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();
+            } catch (e) {
+              rendered_tree = e.message + "\\n" + e.stack;
+            }
           } else {
-            rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)});
+            try {
+              rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)});
+            } catch (e) {
+              rendered_tree = e.message + "\\n" + e.stack;
+            }
           }
           let application_state = global.Opal.Isomorfeus.store.native.getState();
           if (typeof global.Opal.Isomorfeus.Transport !== 'undefined') { global.Opal.Isomorfeus.Transport.$disconnect(); }
@@ -111,7 +123,7 @@ module Isomorfeus
 
         # build result
         render_result << " data-iso-nloc='#{props[:locale]}' data-iso-state='#{Oj.dump(application_state, mode: :strict)}'>"
-        render_result << rendered_tree
+        render_result << (rendered_tree ? rendered_tree : "SSR didn't work")
       else
         render_result << " data-iso-nloc='#{props[:locale]}'>"
       end

data/lib/lucid_app/native_component_constructor.rb

@@ -53,6 +53,10 @@ module LucidApp
           static get displayName() {
             return #{component_name};
           }
+          static set displayName(new_name) {
+            // dont do anything here except returning the set value
+            return new_name;
+          }
           render() {
             this.context = this.state.isomorfeus_store_state;
             Opal.React.render_buffer.push([]);

data/lib/lucid_component/app_store_proxy.rb

@@ -1,7 +1,7 @@
 module LucidComponent
   class AppStoreProxy
     def initialize(component_instance)
-      @native_component_instance = component_instance.to_n
+      @native = component_instance.to_n
       @component_instance = component_instance
     end
 
@@ -12,9 +12,9 @@ module LucidComponent
         Isomorfeus.store.dispatch(action)
       else
         # check if we have a component local state value
-        if `this.native_component_instance.context`
-          if `this.native_component_instance.context.application_state && this.native_component_instance.context.application_state.hasOwnProperty(key)`
-            return @native_component_instance.JS['context'].JS[:application_state].JS[key]
+        if `this.native.props.store`
+          if `this.native.props.store.application_state && this.native.props.store.application_state.hasOwnProperty(key)`
+            return @native.JS[:props].JS[:store].JS[:application_state].JS[key]
           end
         else
           a_state = Isomorfeus.store.get_state

data/lib/lucid_component/class_store_proxy.rb

@@ -1,7 +1,7 @@
 module LucidComponent
   class ClassStoreProxy
     def initialize(component_instance)
-      @native_component_instance = component_instance.to_n
+      @native = component_instance.to_n
       @component_instance = component_instance
       @component_name = component_instance.class.to_s
     end
@@ -14,10 +14,11 @@ module LucidComponent
       else
         # get class state
         # check if we have a component local state value
-        if `this.native_component_instance.context`
-          if @native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name] &&
-            @native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name].JS.hasOwnProperty(key)
-            return @native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name].JS[key]
+        if @native.JS[:props].JS[:store]
+          if @native.JS[:props].JS[:store].JS[:component_class_state] &&
+              @native.JS[:props].JS[:store].JS[:component_class_state].JS[@component_name] &&
+              @native.JS[:props].JS[:store].JS[:component_class_state].JS[@component_name].JS.hasOwnProperty(key)
+            return @native.JS[:props].JS[:store].JS[:component_class_state].JS[@component_name].JS[key]
           end
         else
           a_state = Isomorfeus.store.get_state

data/lib/lucid_component/instance_store_proxy.rb

@@ -1,7 +1,7 @@
 module LucidComponent
   class InstanceStoreProxy
     def initialize(component_instance)
-      @native_component_instance = component_instance.to_n
+      @native = component_instance.to_n
       @component_instance = component_instance
       @component_object_id = component_instance.object_id.to_s
     end
@@ -16,11 +16,12 @@ module LucidComponent
       else
         # get instance state
 
-        if `this.native_component_instance.context`
-          if @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id] &&
-            @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id].JS.hasOwnProperty(key)
+        if @native.JS[:props].JS[:store]
+          if @native.JS[:props].JS[:store].JS[:component_state] &&
+              @native.JS[:props].JS[:store].JS[:component_state].JS[@component_object_id] &&
+              @native.JS[:props].JS[:store].JS[:component_state].JS[@component_object_id].JS.hasOwnProperty(key)
             # check if we have a component local state value
-            return @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id].JS[key]
+            return @native.JS[:props].JS[:store].JS[:component_state].JS[@component_object_id].JS[key]
           end
         else
           a_state = Isomorfeus.store.get_state

data/lib/lucid_component/native_component_constructor.rb

@@ -41,6 +41,10 @@ module LucidComponent
           static get displayName() {
             return #{component_name};
           }
+          static set displayName(new_name) {
+            // dont do anything here except returning the set value
+            return new_name;
+          }
           render() {
             Opal.React.render_buffer.push([]);
             // console.log("lucid component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
@@ -54,7 +58,7 @@ module LucidComponent
             return Opal.React.render_buffer.pop();
           }
           data_access() {
-            return this.context;
+            return this.props.store;
           }
           shouldComponentUpdate(next_props, next_state) {
             let counter = 0;
@@ -90,12 +94,14 @@ module LucidComponent
             return null;
           }
         }
-        base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
         base.jss_styles = null;
         base.jss_styles_used = null;
         base.use_styles = null;
+        base.store_updates = true;
         base.react_component = function(props) {
           let classes = null;
+          let store;
+          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))) {
@@ -106,8 +112,11 @@ module LucidComponent
             }
             classes = base.use_styles();
           }
-          let class_theme_props = Object.assign({}, props, { classes: classes, theme: theme });
-          return Opal.global.React.createElement(base.lucid_react_component, class_theme_props);
+          let new_props = Object.assign({}, props)
+          new_props.classes = classes;
+          new_props.theme = theme;
+          new_props.store = store;
+          return Opal.global.React.createElement(base.lucid_react_component, new_props);
         }
       }
     end

data/lib/lucid_component/store_api.rb

@@ -33,8 +33,11 @@ module LucidComponent
           @default_instance_store ||= ::LucidComponent::ComponentInstanceStoreDefaults.new(state, self.to_s)
         end
 
-        def store_updates_off
-          `delete base.lucid_react_component['contextType']`
+        def store_updates(switch)
+          case switch
+          when :on then `base.store_updates = true`
+          when :off then `base.store_updates = false`
+          end
         end
       end
     end

data/lib/lucid_material/app/native_component_constructor.rb

@@ -54,6 +54,10 @@ module LucidMaterial
             static get displayName() {
               return #{component_name};
             }
+            static set displayName(new_name) {
+              // dont do anything here except returning the set value
+              return new_name;
+            }
             render() {
               this.context = this.state.isomorfeus_store_state;
               Opal.React.render_buffer.push([]);

data/lib/lucid_material/component/native_component_constructor.rb

@@ -42,6 +42,10 @@ module LucidMaterial
             static get displayName() {
               return #{component_name};
             }
+            static set displayName(new_name) {
+              // dont do anything here except returning the set value
+              return new_name;
+            }
             render() {
               Opal.React.render_buffer.push([]);
               // console.log("material component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
@@ -55,7 +59,7 @@ module LucidMaterial
               return Opal.React.render_buffer.pop();
             }
             data_access() {
-              return this.context;
+              return this.props.store;
             }
             shouldComponentUpdate(next_props, next_state) {
               let counter = 0;
@@ -91,12 +95,14 @@ module LucidMaterial
               return null;
             }
           };
-          base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
           base.jss_styles = null;
           base.jss_styles_used = null;
           base.use_styles = null;
+          base.store_updates = true;
           base.react_component = function(props) {
             let classes = null;
+            let store;
+            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))) {
@@ -107,8 +113,11 @@ module LucidMaterial
               }
               classes = base.use_styles();
             }
-            let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
-            return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
+            let new_props = Object.assign({}, props)
+            new_props.classes = classes;
+            new_props.theme = theme;
+            new_props.store = store;
+            return Opal.global.React.createElement(base.lucid_react_component, new_props);
           }
         }
       end

data/lib/react.rb

@@ -136,12 +136,12 @@ module React
       if (block !== nil) {
         Opal.React.render_buffer.push([]);
         // console.log("create_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-        let block_result = block.$call()
+        let block_result = block.$call();
         if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
           Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
         }
         // console.log("create_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-        children = Opal.React.render_buffer.pop()
+        children = Opal.React.render_buffer.pop();
         if (children.length == 1) { children = children[0]; }
         else if (children.length == 0) { children = null; }
       } else if (children === nil) { children = null; }

data/lib/react/component/native_component_constructor.rb

@@ -37,6 +37,10 @@ module React
             static get displayName() {
               return #{component_name};
             }
+            static set displayName(new_name) {
+              // dont do anything here except returning the set value
+              return new_name;
+            }
             render() {
               Opal.React.render_buffer.push([]);
               // console.log("react component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.10.8'
+  VERSION = '16.10.9'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.10.8
+  version: 16.10.9
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-10-11 00:00:00.000000000 Z
+date: 2019-10-13 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.14
+        version: 4.0.15
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.0.14
+        version: 4.0.15
 - !ruby/object:Gem::Dependency
   name: isomorfeus-speednode
   requirement: !ruby/object:Gem::Requirement