isomorfeus-react 16.6.8 → 16.8.0

data/lib/lucid_material/app/base.rb

@@ -0,0 +1,9 @@
+module LucidMaterial
+  module App
+    class Base
+      def self.inherited(base)
+        base.include(::LucidMaterial::App::Mixin)
+      end
+    end
+  end
+end

data/lib/lucid_material/app/mixin.rb

@@ -0,0 +1,20 @@
+module LucidMaterial
+  module App
+    module Mixin
+      def self.included(base)
+        base.include(::Native::Wrapper)
+        base.extend(::LucidMaterial::App::NativeComponentConstructor)
+        base.extend(::React::Component::ShouldComponentUpdate)
+        base.extend(::React::Component::EventHandler)
+        base.include(::React::Component::Elements)
+        base.include(::React::Component::API)
+        base.include(::React::Component::Callbacks)
+        base.include(::React::ReduxComponent::API)
+        base.include(::LucidMaterial::Component::API)
+        base.include(::LucidApp::API)
+        base.include(::React::Component::Features)
+        base.include(::React::Component::Resolution)
+      end
+    end
+  end
+end

data/lib/lucid_material/app/native_component_constructor.rb

@@ -0,0 +1,116 @@
+module LucidMaterial
+  module App
+    module NativeComponentConstructor
+      # for should_component_update we apply ruby semantics for comparing props
+      # to do so, we convert the props to ruby hashes and then compare
+      # this makes sure, that for example rubys Nil object gets handled properly
+      def self.extended(base)
+        component_name = base.to_s
+        # language=JS
+        %x{
+          base.jss_styles = {};
+          base.lucid_react_component = class extends Opal.global.React.Component {
+            constructor(props) {
+              super(props);
+              if (base.$default_state_defined()) {
+                this.state = base.$state().$to_n();
+              } else {
+                this.state = {};
+              };
+              this.state.isomorfeus_store_state = Opal.Isomorfeus.store.native.getState();
+              var current_store_state = this.state.isomorfeus_store_state;
+              if (typeof current_store_state.component_class_state[#{component_name}] !== "undefined") {
+                this.state.component_class_state = {};
+                this.state.component_class_state[#{component_name}] = current_store_state.component_class_state[#{component_name}];
+              } else {
+                this.state.component_class_state = {};
+                this.state.component_class_state[#{component_name}] = {};
+              };
+              this.__ruby_instance = base.$new(this);
+              this.__object_id = this.__ruby_instance.$object_id().$to_s();
+              if (!this.state.component_state) {
+                this.state.component_state = {};
+                this.state.component_state[this.__object_id] = {};
+              };
+              var event_handlers = #{base.event_handlers};
+              for (var i = 0; i < event_handlers.length; i++) {
+                this[event_handlers[i]] = this[event_handlers[i]].bind(this);
+              }
+              var defined_refs = #{base.defined_refs};
+              for (var ref in defined_refs) {
+                if (defined_refs[ref] != null) {
+                  this[ref] = function(element) {
+                    #{`this.__ruby_instance`.instance_exec(React::Ref.new(`element`), `defined_refs[ref]`)}
+                  }
+                  this[ref] = this[ref].bind(this);
+                } else {
+                  this[ref] = Opal.global.React.createRef();
+                }
+              }
+              this.listener = this.listener.bind(this);
+              this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
+            }
+            static get displayName() {
+              return #{component_name};
+            }
+            render() {
+              Opal.React.render_buffer.push([]);
+              Opal.React.active_components.push(this);
+              Opal.React.active_redux_components.push(this.__ruby_instance);
+              #{`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();
+              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);
+              if (#{`next_ruby_state` != `current_ruby_state`}) {
+                var self = this;
+                /* setTimeout(function() { */ self.setState({ isomorfeus_store_state: next_state }); /*}, 0 ); */
+              }
+            }
+            componentWillUnmount() {
+              if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
+            }
+            validateProp(props, propName, componentName) {
+              if (propName === "isomorfeus_store") { return null };
+              var prop_data = base.lucid_react_component.propValidations[propName];
+              if (!prop_data) { return true; };
+              var value = props[propName];
+              var result;
+              if (typeof prop_data.ruby_class != "undefined") {
+                result = (value.$class() == prop_data.ruby_class);
+                if (!result) {
+                  return new Error('Invalid prop ' + propName + '! Expected ' + prop_data.ruby_class.$to_s() + ' but was ' + value.$class().$to_s() + '!');
+                }
+              } else if (typeof prop_data.is_a != "undefined") {
+                result = value["$is_a?"](prop_data.is_a);
+                if (!result) {
+                  return new Error('Invalid prop ' + propName + '! Expected a child of ' + prop_data.is_a.$to_s() + '!');
+                }
+              }
+              if (typeof prop_data.required != "undefined") {
+                if (prop_data.required && (typeof props[propName] == "undefined")) {
+                  return new Error('Prop ' + propName + ' is required but not given!');
+                }
+              }
+              return null;
+            }
+          }
+          base.lucid_material_component = null;
+          base.react_component = function(outer_props) {
+            if (!base.lucid_material_component) {
+              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, outer_props);
+          }
+        }
+      end
+    end
+  end
+end

data/lib/lucid_material/component/api.rb

@@ -0,0 +1,19 @@
+module LucidMaterial
+  module Component
+    module API
+      def self.included(base)
+        base.instance_exec do
+          def styles(styles_hash = nil, &block)
+            styles_hash = block.call if block_given?
+            `base.jss_styles = #{styles_hash.to_n}` if styles_hash
+            `Opal.Hash.$new(base.jss_styles)`
+          end
+        end
+
+        def classes
+          props.classes
+        end
+      end
+    end
+  end
+end

data/lib/lucid_material/component/base.rb

@@ -0,0 +1,9 @@
+module LucidMaterial
+  module Component
+    class Base
+      def self.inherited(base)
+        base.include(::LucidMaterial::Component::Mixin)
+      end
+    end
+  end
+end

data/lib/lucid_material/component/mixin.rb

@@ -0,0 +1,21 @@
+module LucidMaterial
+  module Component
+    module Mixin
+      def self.included(base)
+        base.include(::Native::Wrapper)
+        base.extend(::LucidMaterial::Component::NativeComponentConstructor)
+        base.extend(::React::Component::NativeComponentValidateProp)
+        base.extend(::LucidComponent::EventHandler)
+        base.include(::React::Component::Elements)
+        base.include(::React::Component::API)
+        base.include(::React::Component::Callbacks)
+        base.include(::React::ReduxComponent::API)
+        base.include(::LucidComponent::API)
+        base.include(::LucidMaterial::Component::API)
+        base.include(::LucidComponent::Initializer)
+        base.include(::React::Component::Features)
+        base.include(::React::Component::Resolution)
+      end
+    end
+  end
+end

data/lib/lucid_material/component/native_component_constructor.rb

@@ -0,0 +1,158 @@
+module LucidMaterial
+  module Component
+    module NativeComponentConstructor
+      # for should_component_update we apply ruby semantics for comparing props
+      # to do so, we convert the props to ruby hashes and then compare
+      # this makes sure, that for example rubys Nil object gets handled properly
+      def self.extended(base)
+        component_name = base.to_s
+        # language=JS
+        %x{
+          base.jss_styles = {};
+          base.lucid_react_component = class extends Opal.global.React.Component {
+            constructor(props) {
+              super(props);
+              if (base.$default_state_defined()) {
+                this.state = base.$state().$to_n();
+              } else {
+                this.state = {};
+              };
+              this.__ruby_instance = base.$new(this);
+              this.__object_id = this.__ruby_instance.$object_id().$to_s();
+              if (!this.state.component_state) {
+                this.state.component_state = {};
+                this.state.component_state[this.__object_id] = {};
+              };
+              var event_handlers = #{base.event_handlers};
+              for (var i = 0; i < event_handlers.length; i++) {
+                this[event_handlers[i]] = this[event_handlers[i]].bind(this);
+              }
+              var defined_refs = #{base.defined_refs};
+              for (var ref in defined_refs) {
+                if (defined_refs[ref] != null) {
+                  this[ref] = function(element) {
+                    #{`this.__ruby_instance`.instance_exec(React::Ref.new(`element`), `defined_refs[ref]`)}
+                  }
+                  this[ref] = this[ref].bind(this);
+                } else {
+                  this[ref] = Opal.global.React.createRef();
+                }
+              }
+            }
+            static get displayName() {
+              return #{component_name};
+            }
+            render() {
+              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);
+            }
+            shouldComponentUpdate(next_props, next_state) {
+              var next_props_keys = Object.keys(next_props);
+              var this_props_keys = Object.keys(this.props);
+              if (next_props_keys.length !== this_props_keys.length) { return true; }
+
+              var next_state_keys = Object.keys(next_state);
+              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 (!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" && typeof next_props[property]['$!='] !== "undefined" && typeof this.props[property] !== "undefined" && typeof this.props[property]['$!='] !== "undefined") {
+                    if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; };
+                  } else if (next_props[property] !== this.props[property]) { return true; };
+                }
+              }
+              for (var property in next_state) {
+                if (next_state.hasOwnProperty(property)) {
+                  if (!this.state.hasOwnProperty(property)) { return true; };
+                  if (typeof next_state[property]['$!='] !== "undefined" && typeof this.state[property]['$!='] !== "undefined") {
+                    if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true };
+                  } else if (next_state[property] !== this.state[property]) { return true };
+                }
+              }
+              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) {
+              if (propName === "isomorfeus_store") { return null };
+              var prop_data = base.lucid_react_component.propValidations[propName];
+              if (!prop_data) { return true; };
+              var value = props[propName];
+              var result;
+              if (typeof prop_data.ruby_class != "undefined") {
+                result = (value.$class() == prop_data.ruby_class);
+                if (!result) {
+                  return new Error('Invalid prop ' + propName + '! Expected ' + prop_data.ruby_class.$to_s() + ' but was ' + value.$class().$to_s() + '!');
+                }
+              } else if (typeof prop_data.is_a != "undefined") {
+                result = value["$is_a?"](prop_data.is_a);
+                if (!result) {
+                  return new Error('Invalid prop ' + propName + '! Expected a child of ' + prop_data.is_a.$to_s() + '!');
+                }
+              }
+              if (typeof prop_data.required != "undefined") {
+                if (prop_data.required && (typeof props[propName] == "undefined")) {
+                  return new Error('Prop ' + propName + ' is required but not given!');
+                }
+              }
+              return null;
+            }
+          };
+          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.lucid_material_component) {
+                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);
+            });
+          }
+        }
+      end
+    end
+  end
+end

data/lib/react.rb

@@ -37,6 +37,16 @@ module React
         return result;
     };
 
+    self.internal_prepare_args_and_render = function(component, args, block) {
+      if (args.length > 0) {
+        var last_arg = args[args.length - 1];
+        if (typeof last_arg === 'string' || last_arg instanceof String) {
+          if (args.length === 1) { Opal.React.internal_render(component, null, last_arg, null); }
+          else { Opal.React.internal_render(component, args[0], last_arg, null); }
+        } else { Opal.React.internal_render(component, args[0], null, block); }
+      } else { Opal.React.internal_render(component, null, null, block); }
+    };
+
     self.internal_render = function(component, props, string_child, block) {
       var children;
       var block_result;
@@ -103,11 +113,9 @@ module React
       var component = null;
       var block_result = null;
       var native_props = null;
-
-      if (typeof type.react_component == "function") {
+      if (typeof type.react_component !== 'undefined') {
         component = type.react_component;
-      }
-      else {
+      } else {
         component = type;
       }
 
@@ -145,7 +153,7 @@ module React
     `Opal.global.React.forwardRef( function(props, ref) { return block.$call().$to_n(); })`
   end
 
-  def self.isValidElement(react_element)
+  def self.is_valid_element(react_element)
     `Opal.global.React.isValidElement(react_element)`
   end
 

data/lib/react/children.rb

@@ -0,0 +1,35 @@
+module React
+  module Children
+    class << self
+      def count(children)
+        `Opal.global.React.Children.count(children)`
+      end
+
+      def for_each(children, &block)
+        %x{
+          var fun = function(child) {
+            #{block.call(child)};
+          }
+          Opal.global.React.Children.forEach(children, fun);
+        }
+      end
+
+      def map(children, &block)
+        %x{
+          var fun = function(child) {
+            return #{block.call(child)};
+          }
+          return Opal.global.React.Children.map(children, fun);
+        }
+      end
+
+      def only(children)
+        `Opal.global.React.Children.only(children)`
+      end
+
+      def to_array(children)
+        `Opal.global.React.Children.toArray(children)`
+      end
+    end
+  end
+end

data/lib/react/component/api.rb

@@ -6,40 +6,19 @@ module React
           base_module = base.to_s.deconstantize
           if base_module != ''
             base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
-              %x{
-                if (args.length > 0) {
-                  var last_arg = args[args.length - 1];
-                  if (typeof last_arg === 'string' || last_arg instanceof String) {
-                    if (args.length === 1) { Opal.React.internal_render(#{base}.react_component, null, last_arg, null); }
-                    else { Opal.React.internal_render(#{base}.react_component, args[0], last_arg, null); }
-                  } else { Opal.React.internal_render(#{base}.react_component, args[0], null, block); }
-                } else { Opal.React.internal_render(#{base}.react_component, null, null, block); }
-              }
+              `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
             end
           else
             Object.define_method(base.to_s) do |*args, &block|
-              %x{
-                if (args.length > 0) {
-                  var last_arg = args[args.length - 1];
-                  if (typeof last_arg === 'string' || last_arg instanceof String) {
-                    if (args.length === 1) { Opal.React.internal_render(#{base}.react_component, null, last_arg, null); }
-                    else { Opal.React.internal_render(#{base}.react_component, args[0], last_arg, null); }
-                  } else { Opal.React.internal_render(#{base}.react_component, args[0], null, block); }
-                } else { Opal.React.internal_render(#{base}.react_component, null, null, block); }
-              }
+              `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
             end
           end
 
-
           attr_accessor :props
           attr_accessor :state
 
           def ref(ref_name, &block)
-            defined_refs.JS[ref_name] = if block_given?
-                                          block
-                                        else
-                                          `null`
-                                        end
+            defined_refs.JS[ref_name] = block_given? ? block : `null`
           end
 
           def defined_refs
@@ -137,76 +116,11 @@ module React
                 self.lucid_react_component.defaultProps = {};
               }
             }
-            @default_props = React::Component::Props.new(`self.react_component.defaultProps`)
-          end
-
-          def component_did_catch(&block)
-            # TODO convert error and info
-            %x{
-              self.react_component.prototype.componentDidCatch = function(error, info) {
-                return #{`this.__ruby_instance`.instance_exec(error, info, &block)};
-              }
-            }
-          end
-
-          def component_did_mount(&block)
-            %x{
-              self.react_component.prototype.componentDidMount = function() {
-                return #{`this.__ruby_instance`.instance_exec(&block)};
-              }
-            }
-          end
-
-          def component_did_update(&block)
-            %x{
-              self.react_component.prototype.componentDidUpdate = function() {
-                return #{`this.__ruby_instance`.instance_exec(&block)};
-              }
-            }
-          end
-
-          def component_will_unmount(&block)
-            %x{
-              self.react_component.prototype.componentWillUnmount = function() {
-                return #{`this.__ruby_instance`.instance_exec(&block)};
-              }
-            }
-          end
-
-          def get_derived_state_from_error(&block)
-            %x{
-              self.react_component.prototype.getDerivedStateFromError = function(error) {
-                return #{`this.__ruby_instance`.instance_exec(error, &block)};
-              }
-            }
-          end
-
-          def get_derived_state_from_props(&block)
-            %x{
-              self.react_component.prototype.getDerivedStateFromProps = function(props, state) {
-                return #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`props`), `Opal.Hash.$new(state)`, &block)};
-              }
-            }
-          end
-
-          def get_snapshot_before_update(&block)
-            %x{
-              self.react_component.prototype.getSnapshotBeforeUpdate = function(prev_props, prev_state) {
-                return #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`prev_props`), `Opal.Hash.$new(prev_state)`, &block)};
-              }
-            }
+            @default_props = `Opal.React.Component.Props.$new(self.react_component.defaultProps)`
           end
 
           def render(&block)
-            %x{
-              self.react_component.prototype.render = function() {
-                Opal.React.render_buffer.push([]);
-                Opal.React.active_components.push(this);
-                #{`this.__ruby_instance`.instance_exec(&block)};
-                Opal.React.active_components.pop();
-                return Opal.React.render_buffer.pop();
-              }
-            }
+            `base.render_block = block`
           end
         end
       end