isomorfeus-react 16.6.8 → 16.8.0

data/lib/react/function_component/base.rb

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

data/lib/react/function_component/creator.rb

@@ -1,77 +1,31 @@
 module React
   module FunctionComponent
-    class Creator
-      def self.event_handler(name, &block)
+    module Creator
+      def self.extended(base)
         %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) {
+          base.react_component = 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.push(base);
+            #{base.new(`props`).instance_exec(&`base.function_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
 
-      def self.memo_component(component_name, &block)
-        %x{
-          var fun = Opal.global.React.memo(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);
-        }
+        base_module = base.to_s.deconstantize
+        if base_module != ''
+          base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
+            `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
+          end
+        else
+          Object.define_method(base.to_s) do |*args, &block|
+            `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
+          end
+        end
+
+        def create_function(&block)
+          `base.function_block = #{block}`
+        end
       end
     end
   end

data/lib/react/function_component/event_handler.rb

@@ -0,0 +1,13 @@
+module React
+  module FunctionComponent
+    module EventHandler
+      def event_handler(name, &block)
+        define_method(name) do |event, info|
+          ruby_event = ::React::SyntheticEvent.new(event)
+          block.call(ruby_event, info)
+        end
+        `self[name] = self.prototype['$' + name]`
+      end
+    end
+  end
+end

data/lib/react/function_component/mixin.rb

@@ -0,0 +1,14 @@
+module React
+  module FunctionComponent
+    module Mixin
+      def self.included(base)
+        base.include(::React::Component::Elements)
+        base.include(::React::Component::Features)
+        base.include(::React::FunctionComponent::API)
+        base.include(::React::FunctionComponent::Resolution)
+        base.extend(::React::FunctionComponent::EventHandler)
+        base.extend(::React::FunctionComponent::Creator)
+      end
+    end
+  end
+end

data/lib/react/function_component/resolution.rb

@@ -3,7 +3,7 @@ module React
     module Resolution
       def self.included(base)
         base.instance_exec do
-          alias _react_component_resolution_original_const_missing const_missing
+          alias _react_function_component_resolution_original_const_missing const_missing
 
           def const_missing(const_name)
             # language=JS
@@ -13,14 +13,14 @@ module React
                 #{Object.const_set(const_name, `new_const`)};
                 return new_const;
               } else {
-                return #{_react_component_resolution_original_const_missing(const_name)};
+                return #{_react_function_component_resolution_original_const_missing(const_name)};
               }
             }
           end
         end
       end
 
-      alias _react_component_resolution_original_method_missing method_missing
+      alias _react_function_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.
@@ -37,8 +37,7 @@ module React
           else {
             try {
               var constant = self.$class().$const_get(component_name, true);
-              component_type = typeof constant.react_component;
-              if (component_type === "function" || component_type === "object") {
+              if (typeof constant.react_component !== 'undefined') {
                 component = constant.react_component;
               }
             }
@@ -46,20 +45,23 @@ module React
               component = null;
             }
           }
+          if (!component) {
+            try {
+              constant = Opal.Object.$const_get(component_name);
+              if (typeof constant.react_component !== 'undefined') {
+                component = constant.react_component;
+              }
+            } catch(err) {
+              component = null
+            }
+          }
           if (component) {
-            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); }
+            Opal.React.internal_prepare_args_and_render(component, args, block);
           } else {
-            return #{_react_component_resolution_original_method_missing(component_name, *args, block)};
+            return #{_react_function_component_resolution_original_method_missing(component_name, *args, block)};
           }
         }
       end
-
     end
   end
-end
+end

data/lib/react/memo_component/base.rb

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

data/lib/react/memo_component/creator.rb

@@ -0,0 +1,32 @@
+module React
+  module MemoComponent
+    module Creator
+      def self.extended(base)
+        %x{
+          base.equality_checker = null;
+          base.react_component = Opal.global.React.memo(function(props) {
+            Opal.React.render_buffer.push([]);
+            Opal.React.active_components.push(base);
+            #{base.new(`props`).instance_exec(&`base.function_block`)};
+            Opal.React.active_components.pop();
+            return Opal.React.render_buffer.pop();
+          }, base.equality_checker);
+        }
+
+        def props_are_equal?(&block)
+          %x{
+            base.equality_checker = function (prev_props, next_props) {
+              var prev_ruby_props = Opal.React.Component.Props.$new(prev_props);
+              var next_ruby_props = Opal.React.Component.Props.$new(next_props);
+              return #{base.new(`{}`).instance_exec(`prev_ruby_props`, `next_ruby_props`, &block)};
+            }
+          }
+        end
+
+        def create_memo(&block)
+          `base.function_block = #{block}`
+        end
+      end
+    end
+  end
+end

data/lib/react/memo_component/mixin.rb

@@ -0,0 +1,14 @@
+module React
+  module MemoComponent
+    module Mixin
+      def self.included(base)
+        base.include(::React::Component::Elements)
+        base.include(::React::Component::Features)
+        base.include(::React::FunctionComponent::API)
+        base.include(::React::FunctionComponent::Resolution)
+        base.extend(::React::FunctionComponent::EventHandler)
+        base.extend(::React::MemoComponent::Creator)
+      end
+    end
+  end
+end

data/lib/react/native_constant_wrapper.rb

@@ -15,22 +15,12 @@ module React
         if (component_type === "function" || component_type === "object") {
           component = #@native[name];
         }
-
         if (component) {
-          var children = null;
-          var block_result = null;
-          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); }
+          Opal.React.internal_prepare_args_and_render(component, args, block);
         } else {
           #{raise NameError, "No such native Component #@const_name.#{name}"};
         }
       }
     end
-
   end
 end

data/lib/react/pure_component/mixin.rb

@@ -8,6 +8,8 @@ module React
         base.extend(::React::Component::EventHandler)
         base.include(::React::Component::Elements)
         base.include(::React::Component::API)
+        base.include(::React::Component::Callbacks)
+        base.include(::React::Component::UnsafeAPI)
         base.include(::React::Component::Initializer)
         base.include(::React::Component::Features)
         base.include(::React::Component::Resolution)

data/lib/react/redux_component/api.rb

@@ -21,7 +21,7 @@ module React
 
           def app_store
             @default_app_store_defined = true
-            @default_app_store ||= ::React::ReduxComponent::AppStoreDefaults.new(state)
+            @default_app_store ||= ::React::ReduxComponent::AppStoreDefaults.new(state, self.to_s)
           end
 
           def class_store
@@ -33,98 +33,6 @@ module React
             @default_instance_store_defined = true
             @default_class_store ||= ::React::ReduxComponent::ComponentInstanceStoreDefaults.new(state, self.to_s)
           end
-
-          def component_did_catch(&block)
-            # TODO convert error and info
-            %x{
-              var fun = function(error, info) {
-                Opal.React.active_redux_components.push(this.__ruby_instance);
-                #{`this.__ruby_instance`.instance_exec(error, info, &block)};
-                Opal.React.active_redux_components.pop();
-              }
-              if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidCatch = fun; }
-              else { self.react_component.prototype.componentDidCatch = fun; }
-            }
-          end
-
-          def component_did_mount(&block)
-            %x{
-              var fun = function() {
-                Opal.React.active_redux_components.push(this.__ruby_instance);
-                #{`this.__ruby_instance`.instance_exec(&block)};
-                Opal.React.active_redux_components.pop();
-              }
-              if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidMount = fun; }
-              else { self.react_component.prototype.componentDidMount = fun; }
-            }
-          end
-
-          def component_did_update(&block)
-            %x{
-              var fun = function() {
-                Opal.React.active_redux_components.push(this.__ruby_instance);
-                #{`this.__ruby_instance`.instance_exec(&block)};
-                Opal.React.active_redux_components.pop();
-              }
-              if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidUpdate = fun; }
-              else { self.react_component.prototype.componentDidUpdate = fun; }
-            }
-          end
-
-          def component_will_unmount(&block)
-            # unsubscriber support for ReduxComponent
-            %x{
-              var fun = function() {
-                if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
-                Opal.React.active_redux_components.push(this.__ruby_instance);
-                #{`this.__ruby_instance`.instance_exec(&block)};
-                Opal.React.active_redux_components.pop();
-              }
-              if (self.lucid_react_component) { self.lucid_react_component.prototype.componentWillUnmount = fun; }
-              else { self.react_component.prototype.componentWillUnmount = fun; }
-            }
-          end
-
-          def get_derived_state_from_props(&block)
-            %x{
-              var fun = function(props, state) {
-                Opal.React.active_redux_components.push(this.__ruby_instance);
-                #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`props`), `Opal.Hash.$new(state)`, &block)};
-                Opal.React.active_redux_components.pop();
-              }
-              if (self.lucid_react_component) { self.lucid_react_component.prototype.getDerivedStateFromProps = fun; }
-              else { self.react_component.prototype.getDerivedStateFromProps = fun; }
-            }
-          end
-
-          def get_snapshot_before_update(&block)
-            %x{
-              var fun = function(prev_props, prev_state) {
-                Opal.React.active_redux_components.push(this.__ruby_instance);
-                #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`prev_props`), `Opal.Hash.$new(prev_state)`, &block)};
-                Opal.React.active_redux_components.pop();
-              }
-              if (self.lucid_react_component) { self.lucid_react_component.prototype.getSnapshotBeforeUpdate = fun; }
-              else { self.react_component.prototype.getSnapshotBeforeUpdate = fun; }
-            }
-          end
-
-          def render(&block)
-            %x{
-              var fun = function() {
-                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(&block)};
-                Opal.React.active_redux_components.pop();
-                Opal.React.active_components.pop();
-                return Opal.React.render_buffer.pop();
-              }
-              if (self.lucid_react_component) { self.lucid_react_component.prototype.render = fun; }
-              else { self.react_component.prototype.render = fun; }
-            }
-          end
         end
       end
     end

data/lib/react/redux_component/initializer.rb

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

data/lib/react/redux_component/mixin.rb

@@ -8,6 +8,7 @@ module React
         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(::React::ReduxComponent::Initializer)
         base.include(::React::Component::Features)

data/lib/react/redux_component/native_component_constructor.rb

@@ -47,12 +47,22 @@ module React
               this.listener = this.listener.bind(this);
               this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
             }
-            data_access() {
-              return this.state.isomorfeus_store
-            }
             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.state.isomorfeus_store
+            }
             listener() {
               var next_state = Object.assign({}, this.state, { isomorfeus_store: Opal.Isomorfeus.store.native.getState() });
               if (this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store)) {