isomorfeus-react 16.5.1

data/lib/react/component/match.rb

@@ -0,0 +1,31 @@
+module React
+  module Component
+    class Match
+      include ::Native::Wrapper
+
+      def method_missing(prop, *args, &block)
+        @native.JS[:params].JS[prop]
+      end
+
+      def is_exact
+        @native.JS[:isExact]
+      end
+
+      def params
+        self
+      end
+
+      def path
+        @native.JS[:path]
+      end
+
+      def url
+        @native.JS[:url]
+      end
+
+      def to_n
+        @native
+      end
+    end
+  end
+end

data/lib/react/component/mixin.rb

@@ -0,0 +1,19 @@
+module React
+  module Component
+    module Mixin
+      def self.included(base)
+        base.include(::Native::Wrapper)
+        base.extend(::React::Component::NativeComponentConstructor)
+        base.extend(::React::Component::NativeComponentValidateProp)
+        base.extend(::React::Component::ShouldComponentUpdate)
+        base.extend(::React::Component::EventHandler)
+        base.include(::React::Component::Elements)
+        base.include(::React::Component::API)
+        base.include(::React::Component::UnsafeAPI)
+        base.include(::React::Component::Initializer)
+        base.include(::React::Component::Features)
+        base.include(::React::Component::Resolution)
+      end
+    end
+  end
+end

data/lib/react/component/native_component_constructor.rb

@@ -0,0 +1,76 @@
+module React
+  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.react_component = class extends 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);
+              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] = React.createRef();
+                }
+              }
+            }
+            static get displayName() {
+              return #{component_name};
+            }
+            shouldComponentUpdate(next_props, next_state) {
+              if (base.has_custom_should_component_update) {
+                return this.__ruby_instance["$should_component_update"](#{(Hash.new(next_props))}, #{Hash.new(next_state)});
+              } else {
+                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; }
+
+                for (var property in next_props) {
+                  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;
+              }
+            }
+          }
+        }
+      end
+    end
+  end
+end

data/lib/react/component/native_component_validate_prop.rb

@@ -0,0 +1,37 @@
+module React
+  module Component
+    module NativeComponentValidateProp
+      # 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)
+        # language=JS
+        %x{
+          base.react_component.prototype.validateProp = function(props, propName, componentName) {
+            var prop_data = base.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;
+          }
+        }
+      end
+    end
+  end
+end

data/lib/react/component/props.rb

@@ -0,0 +1,49 @@
+module React
+  module Component
+    class Props
+      include ::Native::Wrapper
+
+      def method_missing(prop, *args, &block)
+        @native.JS[`Opal.React.lower_camelize(prop)`]
+      end
+
+      def isomorfeus_store
+        @native.JS[:isomorfeus_store]
+      end
+
+      def history
+        return @history if @history
+        return nil unless @native.JS[:history]
+        if @native.JS[:history].JS[:pathname]
+          @history = React::Component::History.new(@native.JS[:history])
+        else
+          @native.JS[:history]
+        end
+      end
+
+      def location
+        return @location if @location
+        return nil unless @native.JS[:location]
+        if @native.JS[:location].JS[:pathname]
+          @location = React::Component::Location.new(@native.JS[:location])
+        else
+          @native.JS[:location]
+        end
+      end
+
+      def match
+        return @match if @match
+        return nil unless @native.JS[:match]
+        if @native.JS[:match].JS[:path]
+          @match = React::Component::Match.new(@native.JS[:match])
+        else
+          @native.JS[:match]
+        end
+      end
+
+      def to_n
+        @native
+      end
+    end
+  end
+end

data/lib/react/component/resolution.rb

@@ -0,0 +1,71 @@
+module React
+  module Component
+    module Resolution
+      def self.included(base)
+        base.instance_exec do
+          alias _react_component_resolution_original_const_missing const_missing
+
+          def const_missing(const_name)
+            %x{
+              if (typeof Opal.global[const_name] == "object") {
+                var new_const = #{React::NativeConstantWrapper.new(`Opal.global[const_name]`, const_name)};
+                #{Object.const_set(const_name, `new_const`)};
+                return new_const;
+              } else {
+                return #{_react_component_resolution_original_const_missing(const_name)};
+              }
+            }
+          end
+        end
+      end
+
+
+      alias _react_component_resolution_original_method_missing method_missing
+
+      def method_missing(component_name, *args, &block)
+        # html tags are defined as methods, so they will not end up here.
+        # first check for native component and render it, we want to be fast for native components
+        # second check for ruby component and render it, they are a bit slower anyway
+        # third pass on method missing
+        # language=JS
+        %x{
+          var component = null;
+          if (typeof Opal.global[component_name] == "function") {
+            component = Opal.global[component_name];
+          }
+          else {
+            var modules = self.$class().$to_s().split("::");
+            var modules_length = modules.length - 1;
+            // modules.unshift('');
+            var module;
+            var constant;
+            for (var i = modules_length; i > 0; i--) {
+              try {
+                module = modules.slice(0, i).join('::')
+                constant = self.$class().$const_get(module).$const_get(component_name, false);
+                if (typeof constant.react_component == "function") {
+                  component = constant.react_component;
+                  break;
+                }
+              }
+              catch(err) {
+                component = null;
+              }
+            }
+          }
+          if (component) {
+            var props = null;
+
+            if (args.length > 0) {
+              props = Opal.React.to_native_react_props(args[0]);
+            }
+            Opal.React.internal_render(component, props, block);
+          } else {
+            return #{_react_component_resolution_original_method_missing(component_name, *args, block)};
+          }
+        }
+      end
+
+    end
+  end
+end

data/lib/react/component/should_component_update.rb

@@ -0,0 +1,14 @@
+module React
+  module Component
+    module ShouldComponentUpdate
+      def self.extended(base)
+        base.define_singleton_method(:should_component_update?) do |&block|
+          `base.has_custom_should_component_update = true`
+          define_method(:should_component_update) do |next_props, next_state|
+            !!block.call(Hash.new(next_props), Hash.new(next_state))
+          end
+        end
+      end
+    end
+  end
+end

data/lib/react/component/state.rb

@@ -0,0 +1,52 @@
+module React
+  module Component
+    class State
+      include ::Native::Wrapper
+
+      def method_missing(key, *args, &block)
+        if `args.length > 0`
+          new_state = `{}`
+          new_state.JS[(`key.endsWith('=')` ? key.chop : key)] = args[0]
+          if block_given?
+            @native.JS.setState(new_state, `function() { block.$call(); }`)
+          else
+            @native.JS.setState(new_state, `null`)
+          end
+        else
+          return nil if `typeof #@native.state[key] == "undefined"`
+          @native.JS[:state].JS[key]
+        end
+      end
+
+      def set_state(updater, &block)
+        new_state = `{}`
+        updater.keys.each do |key|
+          new_state.JS[key] = updater[key]
+        end
+        if block_given?
+          @native.JS.setState(new_state, `function() { block.$call(); }`)
+        else
+          @native.JS.setState(new_state, `null`)
+        end
+      end
+
+      def size
+        `Object.keys(#@native.state).length`;
+      end
+
+      def to_n
+        %x{
+          var new_native = {};
+          for (var key in #@native.state) {
+            if (typeof #@native.state[key].$to_n !== "undefined") {
+              new_native[key] = #@native.state[key].$to_n();
+            } else {
+              new_native[key] = #@native.state[key];
+            }
+          }
+          return new_native;
+        }
+      end
+    end
+  end
+end

data/lib/react/component/unsafe_api.rb

@@ -0,0 +1,33 @@
+module React
+  module Component
+    module UnsafeAPI
+      def self.included(base)
+        base.instance_exec do
+          def unsafe_component_will_mount(&block)
+            %x{
+              self.react_component.prototype.UNSAFE_componentWillMount = function() {
+                return #{`this.__ruby_instance`.instance_exec(&block)};
+              }
+            }
+          end
+
+          def unsafe_component_will_receive_props(&block)
+            %x{
+              self.react_component.prototype.UNSAFE_componentWillReceiveProps = function(next_props) {
+                return #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`next_props`), &block)};
+              }
+            }
+          end
+
+          def unsafe_component_will_update(&block)
+            %x{
+              self.react_component.prototype.UNSAFE_componentWillUpdate = function(next_props, next_state) {
+                return #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`next_props`), `Opal.Hash.$new(next_state)`, &block)};
+              }
+            }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/react/context_wrapper.rb

@@ -0,0 +1,47 @@
+module React
+  class ContextWrapper
+    include ::Native::Wrapper
+
+    def Consumer(*args, &block)
+      %x{
+        var children = null;
+        var block_result = null;
+        var props = null;
+        var react_element;
+
+        if (args.length > 0) {
+          props = Opal.React.to_native_react_props(args[0]);
+        }
+
+        var react_element = React.createElement(this.native.Consumer, props, function(value) {
+          if (block !== nil) {
+            Opal.React.render_buffer.push([]);
+            block_result = block.$call();
+            if (block_result && (block_result !== nil && (typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
+              (typeof block_result.constructor !== "undefined" && block_result.constructor === Array && block_result[0] && typeof block_result[0].$$typeof === "symbol")
+              ))) {
+              Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
+            }
+            children = Opal.React.render_buffer.pop();
+            if (children.length == 1) { children = children[0]; }
+            else if (children.length == 0) { children = null; }
+          }
+          return Opal.React.render_buffer.pop();
+        });
+        Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
+        return null;
+      }
+    end
+
+    def Provider(*args, &block)
+      %x{
+        var props = null;
+
+        if (args.length > 0) {
+          props = Opal.React.to_native_react_props(args[0]);
+        }
+        Opal.React.internal_render(this.native.Provider, props, block);
+      }
+    end
+  end
+end

data/lib/react/function_component/creator.rb

@@ -0,0 +1,47 @@
+module React
+  module FunctionComponent
+    class Creator
+      def self.event_handler(name, &block)
+        %x{
+          Opal.React.FunctionComponent.Runner.event_handlers[name] = function(event, info) {
+            #{ruby_event = ::React::SyntheticEvent.new(`event`)};
+            #{React::FunctionComponent::Runner.new(`{}`).instance_exec(ruby_event, `info`, &block)};
+          }
+        }
+      end
+
+      def self.function_component(component_name, &block)
+
+        %x{
+          var fun = function(props) {
+            Opal.React.render_buffer.push([]);
+            Opal.React.active_components.push(Opal.React.FunctionComponent.Runner.event_handlers);
+            #{React::FunctionComponent::Runner.new(`props`).instance_exec(&block)};
+            Opal.React.active_components.pop();
+            return Opal.React.render_buffer.pop();
+          }
+          var const_names;
+          if (component_name.includes('.')) {
+            const_names = component_name.split('.');
+          } else {
+            const_names = [component_name];
+          }
+          var const_last = const_names.length - 1;
+          const_names.reduce(function(prev, curr) {
+            if (prev && prev[curr]) {
+              return prev[curr];
+            } else {
+              if (const_names.indexOf(curr) === const_last) {
+                prev[curr] = fun;
+                return prev[curr];
+              } else {
+                prev[curr] = {};
+                return prev[curr];
+              }
+            }
+          }, Opal.global);
+        }
+      end
+    end
+  end
+end