isomorfeus-react 16.9.14 → 16.9.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 70053e0a26f29ea0ee7021a2842b5c87a90059663cd6632c6d0f09537fde5a14
-  data.tar.gz: d4e4392d9c50afce0a800afd847d5490ef915614fbe8a31944088e03ca38d3d9
+  metadata.gz: d6a624f8280c1b483397dadc3361be73488bb6004dc263aaec62d0bab21cf065
+  data.tar.gz: 48003a6d556f82771e4cbe4b63f163bb4f376c9077162f43114e52d9f73fa832
 SHA512:
-  metadata.gz: 94d4bf83a2dbcdcd8842b11bd8b1a2f5724d4862b1c4a27b07786542222a1b0aba390f8c01639e1680c7787d9183a93269fb6972418b20bbe243c62e925a69fb
-  data.tar.gz: bd391ac3e496bf54711ef02f0b2e113dac261b1f5e802dd36ba557660f8da1863e5e3ddbd450531a653d5a7f9aa84b09d2271924e916f1f8f24b19f7e34edd0b
+  metadata.gz: bf81b8abb2289a745047e4820a1706aa61d88e351009c894c57c0145fb03fdac4b8250eab814cb55545930d28a057150bdbc5e69b35392ab0acc1b4a9b5d3783
+  data.tar.gz: eec392fecf656b27d0ec43ce02dbc0d412f5a4ce59dd7d76438810b7867aac2cf8bdfeb64935f435a7da1985d8f83ca50e48c7c33de73bc0f8ace9cef815e7d1

data/README.md

@@ -28,7 +28,7 @@ Component Types:
 Which component to use?
 - Usually LucidApp and LucidComponent along with some imported javascript components.
 
-Specific to Class, Pure, Redux, Lucid and LucidMaterial Components:
+Specific to Class, Pure, Lucid and LucidMaterial Components:
 - [Events](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/events.md)
 - [Lifecycle Callbacks](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lifecycle_callbacks.md)
 - [Props](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/props.md)

data/lib/isomorfeus/top_level_browser.rb

@@ -10,7 +10,7 @@ module Isomorfeus
           component = nil
           begin
             component = component_name.constantize
-          rescue
+          rescue LoadError
             @timeout_start = Time.now unless @timeout_start
             if (Time.now - @timeout_start) < 10
               `setTimeout(Opal.Isomorfeus.TopLevel['$mount!'], 100)`
@@ -32,7 +32,16 @@ module Isomorfeus
                 }
               }
             end
-            mount_component(component, props, root_element, hydrated)
+            begin
+              mount_component(component, props, root_element, hydrated)
+            rescue LoadError
+              @timeout_start = Time.now unless @timeout_start
+              if (Time.now - @timeout_start) < 10
+                `setTimeout(Opal.Isomorfeus.TopLevel['$mount!'], 100)`
+              else
+                `console.error("Unable to mount '" + #{component_name} + "'!")`
+              end
+            end
           end
         end
       end

data/lib/lucid_app/api.rb

@@ -1,6 +1,26 @@
 module LucidApp
   module API
     def self.included(base)
+      base.instance_exec do
+        def theme(theme_hash = nil, &block)
+          if block_given?
+            %x{
+              let result = block.$call();
+              base.jss_theme = result.$to_n();
+              return result;
+            }
+          elsif theme_hash
+            `base.jss_theme = #{theme_hash.to_n}` if theme_hash
+            theme_hash
+          elsif `typeof base.jss_theme === 'object'`
+            `Opal.Hash.$new(base.jss_theme)`
+          else
+            nil
+          end
+        end
+        alias_method :theme=, :theme
+      end
+
       def context
         @native.JS[:context]
       end

data/lib/lucid_app/native_component_constructor.rb

@@ -7,7 +7,6 @@ module LucidApp
       component_name = base.to_s
       # language=JS
       %x{
-        base.jss_styles = null;
         base.lucid_react_component = class extends Opal.global.React.Component {
           constructor(props) {
             super(props);
@@ -60,16 +59,15 @@ module LucidApp
             #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
             Opal.React.active_redux_components.pop();
             Opal.React.active_components.pop();
-            var children = Opal.React.render_buffer.pop();
+            let children = Opal.React.render_buffer.pop();
             return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
           }
           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);
+            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`}) {
-              var self = this;
-              /* setTimeout(function() { */ self.setState({ isomorfeus_store_state: next_state }); /*}, 0 ); */
+              this.setState({ isomorfeus_store_state: next_state });
             }
           }
           componentWillUnmount() {
@@ -81,24 +79,28 @@ module LucidApp
             return null;
           }
         }
+        base.jss_styles = null;
+        base.jss_theme = {};
         base.use_styles = null;
-        base.react_component = function(props) {
+        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?"]()) {
-              base.use_styles = Opal.global.ReactJSS.createUseStyles(base.jss_styles);
+              let styles = base.jss_styles
+              if (typeof styles === 'function') { styles = styles(theme); }
+              base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
             }
             classes = base.use_styles();
           }
-          if (classes) {
-            let classes_props = Object.assign({}, props, { classes: classes });
-            return Opal.global.React.createElement(base.lucid_react_component, classes_props);
-          } else {
-            return Opal.global.React.createElement(base.lucid_react_component, props);
-          }
+          let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
+          return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
+        }
+        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);
         }
       }
     end
   end
 end
-

data/lib/lucid_component/app_store_proxy.rb

@@ -1,9 +1,8 @@
 module LucidComponent
   class AppStoreProxy
-    def initialize(component_instance, access_key = 'state')
+    def initialize(component_instance)
       @native_component_instance = component_instance.to_n
       @component_instance = component_instance
-      @access_key = access_key
     end
 
     def method_missing(key, *args, &block)
@@ -14,8 +13,8 @@ module LucidComponent
         Isomorfeus.store.dispatch(action)
       else
         # check if we have a component local state value
-        if `this.native_component_instance[this.access_key]["isomorfeus_store"]["application_state"].hasOwnProperty(key)`
-          return @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:application_state].JS[key]
+        if `this.native_component_instance.context.application_state.hasOwnProperty(key)`
+          return @native_component_instance.JS['context'].JS[:application_state].JS[key]
         elsif @component_instance.class.default_app_store_defined && @component_instance.class.app_store.to_h.key?(key)
           # check if a default value was given
           return @component_instance.class.app_store.to_h[key]

data/lib/lucid_component/class_store_proxy.rb

@@ -1,10 +1,9 @@
 module LucidComponent
   class ClassStoreProxy
-    def initialize(component_instance, access_key = 'state')
+    def initialize(component_instance)
       @native_component_instance = component_instance.to_n
       @component_instance = component_instance
       @component_name = component_instance.class.to_s
-      @access_key = access_key
     end
 
     def method_missing(key, *args, &block)
@@ -16,9 +15,9 @@ module LucidComponent
       else
         # get class state
         # check if we have a component local state value
-        if @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_class_state].JS[@component_name] &&
-          @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_class_state].JS[@component_name].JS.hasOwnProperty(key)
-          return @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_class_state].JS[@component_name].JS[key]
+        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]
         elsif @component_instance.class.default_class_store_defined && @component_instance.class.class_store.to_h.key?(key)
           # check if a default value was given
           return @component_instance.class.class_store.to_h[key]

data/lib/lucid_component/initializer.rb

@@ -2,11 +2,11 @@ module LucidComponent
   module Initializer
     def initialize(native_component)
       @native = native_component
-      @app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self}, 'props')`
-      @class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self}, 'props')`
+      @app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self})`
+      @class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self})`
       @props = `Opal.React.Component.Props.$new(#@native)`
       @state = `Opal.React.Component.State.$new(#@native)`
-      @store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self}, 'props')`
+      @store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self})`
     end
   end
 end

data/lib/lucid_component/instance_store_proxy.rb

@@ -1,10 +1,9 @@
 module LucidComponent
   class InstanceStoreProxy
-    def initialize(component_instance, access_key = 'state')
+    def initialize(component_instance)
       @native_component_instance = component_instance.to_n
       @component_instance = component_instance
       @component_object_id = component_instance.object_id.to_s
-      @access_key = access_key
     end
 
     def method_missing(key, *args, &block)
@@ -18,10 +17,10 @@ module LucidComponent
       else
         # get instance state
 
-        if @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_state].JS[@component_object_id] &&
-          @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_state].JS[@component_object_id].JS.hasOwnProperty(key)
+        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)
           # check if we have a component local state value
-          return @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_state].JS[@component_object_id].JS[key]
+          return @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id].JS[key]
         elsif @component_instance.class.default_instance_store_defined && @component_instance.class.store.to_h.key?(key)
           # check if a default value was given
           return @component_instance.class.store.to_h[key]

data/lib/lucid_component/native_component_constructor.rb

@@ -7,7 +7,6 @@ module LucidComponent
       component_name = base.to_s
       # language=JS
       %x{
-        base.jss_styles = null;
         base.lucid_react_component = class extends Opal.global.React.Component {
           constructor(props) {
             super(props);
@@ -124,24 +123,21 @@ module LucidComponent
           }
         }
         base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
+        base.jss_styles = 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?"]()) {
-              base.use_styles = Opal.global.ReactJSS.createUseStyles(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);
             }
             classes = base.use_styles();
           }
-          return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Consumer, null, function(store) {
-            let store_props = Object.assign({}, props, { isomorfeus_store: store });
-            if (classes) {
-              let store_classes_props = Object.assign({}, store_props, { classes: classes });
-              return Opal.global.React.createElement(base.lucid_react_component, store_classes_props);
-            } else {
-              return Opal.global.React.createElement(base.lucid_react_component, store_props);
-            }
-          });
+          let class_theme_props = Object.assign({}, props, { classes: classes, theme: theme });
+          return Opal.global.React.createElement(base.lucid_react_component, class_theme_props);
         }
       }
     end

data/lib/lucid_component/styles_support.rb

@@ -6,7 +6,8 @@ module LucidComponent
           if block_given?
             %x{
               base.jss_styles = function(theme) {
-                var result = block.$call(Opal.Hash.$new(theme));
+                let wrapped_theme = Opal.React.Component.Styles.$new(theme);
+                var result = block.$call(wrapped_theme);
                 return result.$to_n();
               }
             }
@@ -20,11 +21,16 @@ module LucidComponent
             nil
           end
         end
+        alias_method :styles=, :styles
       end
 
-      def classes
+      def styles
         props.classes
       end
+
+      def theme
+        props.theme
+      end
     end
   end
 end

data/lib/lucid_material/app/native_component_constructor.rb

@@ -8,7 +8,6 @@ module LucidMaterial
         component_name = base.to_s
         # language=JS
         %x{
-          base.jss_styles = null;
           base.lucid_react_component = class extends Opal.global.React.Component {
             constructor(props) {
               super(props);
@@ -82,24 +81,26 @@ module LucidMaterial
               return null;
             }
           }
-          base.lucid_material_component = null;
-          base.react_component = class extends Opal.global.React.Component {
-            constructor(props) { super(props) }
-            static get displayName() {
-              return #{component_name} + 'Shell';
-            }
-            render() {
-              if (base.jss_styles) {
-                if (!base.lucid_material_component || Opal.Isomorfeus["$development?"]()) {
-                  base.lucid_material_component = Opal.global.MuiStyles.withStyles(base.jss_styles)(function(props){
-                    return Opal.global.React.createElement(base.lucid_react_component, props);
-                  });
-                }
-                return Opal.global.React.createElement(base.lucid_material_component, this.props);
-              } else {
-                return Opal.global.React.createElement(base.lucid_react_component, this.props)
+          base.jss_styles = 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?"]()) {
+                let styles = base.jss_styles
+                if (typeof styles === 'function') { styles = styles(theme); }
+                base.use_styles = Opal.global.MuiStyles.makeStyles(styles);
               }
+              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);
+          }
+          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);
           }
         }
       end

data/lib/lucid_material/component/native_component_constructor.rb

@@ -8,7 +8,6 @@ module LucidMaterial
         component_name = base.to_s
         # language=JS
         %x{
-          base.jss_styles = null;
           base.lucid_react_component = class extends Opal.global.React.Component {
             constructor(props) {
               super(props);
@@ -125,21 +124,21 @@ module LucidMaterial
             }
           };
           base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
-          base.lucid_material_component = null;
-          base.react_component = function(outer_props) {
-            return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Consumer, null, function(store) {
-              var store_props = Object.assign({}, outer_props, { isomorfeus_store: store });
-              if (base.jss_styles) {
-                if (!base.lucid_material_component || Opal.Isomorfeus["$development?"]()) {
-                  base.lucid_material_component = Opal.global.MuiStyles.withStyles(base.jss_styles)(function(props) {
-                    return Opal.global.React.createElement(base.lucid_react_component, props);
-                  });
-                }
-                return Opal.global.React.createElement(base.lucid_material_component, store_props);
-              } else {
-                return Opal.global.React.createElement(base.lucid_react_component, store_props);
+          base.jss_styles = 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?"]()) {
+                let styles = base.jss_styles
+                if (typeof styles === 'function') { styles = styles(theme); }
+                base.use_styles = Opal.global.MuiStyles.makeStyles(styles);
               }
-            });
+              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);
           }
         }
       end

data/lib/react/component/props.rb

@@ -15,6 +15,10 @@ module React
         @classes ||= `Opal.React.Component.Styles.$new(#@native.props.classes)`
       end
 
+      def theme
+        @theme ||= `Opal.React.Component.Styles.$new(#@native.props.theme)`
+      end
+
       def isomorfeus_store
         @native.JS[:props].JS[:isomorfeus_store]
       end

data/lib/react/component/styles.rb

@@ -5,10 +5,15 @@ module React
         @native = native
       end
 
+      # TODO method chain access
+      # we have class.property
       def method_missing(prop, *args, &block)
         %x{
           if (!#@native || typeof #@native[prop] === 'undefined') { return #{nil}; }
-          return #@native[prop];
+          let 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);
         }
       end
 

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.9.14'
+  VERSION = '16.9.15'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.9.14
+  version: 16.9.15
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-08-26 00:00:00.000000000 Z
+date: 2019-08-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: oj