isomorfeus-react 16.6.8 → 16.8.0

data/lib/react/component/callbacks.rb

@@ -0,0 +1,103 @@
+module React
+  module Component
+    module Callbacks
+      def self.included(base)
+        base.instance_exec do
+          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(prev_props, prev_state, snapshot) {
+                Opal.React.active_redux_components.push(this.__ruby_instance);
+                #{`this.__ruby_instance`.instance_exec(`Opal.React.Component.Props.$new(prev_props)`,
+                                                       `Opal.React.Component.State.$new({state: prev_state})`,
+                                                       `snapshot`, &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)
+            %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_error(&block)
+            # TODO convert error
+            %x{
+               var fun = function(error) {
+                var result = #{`this.__ruby_instance`.instance_exec(`error`, &block)};
+                if (result === null) { return null; }
+                if (typeof result.$to_n === 'function') { return result.$to_n() }
+                return result;
+              }
+              if (self.lucid_react_component) { self.lucid_react_component.prototype.getDerivedStateFromError = fun; }
+              else { self.react_component.prototype.getDerivedStateFromError = 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(`Opal.React.Component.Props.$new(props)`,
+                                                       `Opal.React.Component.State.$new({state: 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(`Opal.React.Component.Props.$new(prev_props)`,
+                                                       `Opal.React.Component.State.$new({state: 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
+        end
+      end
+    end
+  end
+end

data/lib/react/component/elements.rb

@@ -2,6 +2,7 @@ module React
   module Component
     module Elements
       # https://www.w3.org/TR/html52/fullindex.html#index-elements
+      # https://www.w3.org/TR/SVG11/eltindex.html
       SUPPORTED_HTML_AND_SVG_ELEMENTS = %w[
         a abbr address area article aside audio
         b base bdi bdo blockquote body br button
@@ -24,10 +25,6 @@ module React
         u ul
         var video
         wbr
-      ] +
-      # https://www.w3.org/TR/SVG11/eltindex.html
-      # elements listed above not mentioned a second time
-        %w[
         altGlyph altGlyphDef altGlyphItem animate animateColor animateMotion animateTransform
         circle clipPath color-profile cursor
         defs desc
@@ -50,29 +47,12 @@ module React
         view vkern
       ]
 
-
       SUPPORTED_HTML_AND_SVG_ELEMENTS.each do |element|
         define_method(element) 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(element, null, last_arg, null); }
-                else { Opal.React.internal_render(element, args[0], last_arg, null); }
-              } else { Opal.React.internal_render(element, args[0], null, block); }
-            } else { Opal.React.internal_render(element, null, null, block); }
-          }
+          `Opal.React.internal_prepare_args_and_render(element, args, block)`
         end
         define_method(`element.toUpperCase()`) 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(element, null, last_arg, null); }
-                else { Opal.React.internal_render(element, args[0], last_arg, null); }
-              } else { Opal.React.internal_render(element, args[0], null, block); }
-            } else { Opal.React.internal_render(element, null, null, block); }
-          }
+          `Opal.React.internal_prepare_args_and_render(element, args, block)`
         end
       end
     end

data/lib/react/component/features.rb

@@ -2,18 +2,17 @@ module React
   module Component
     module Features
       def Fragment(*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(React.Fragment, null, last_arg, null); }
-              else { Opal.React.internal_render(Opal.global.React.Fragment, args[0], last_arg, null); }
-            } else { Opal.React.internal_render(Opal.global.React.Fragment, args[0], null, block); }
-          } else { Opal.React.internal_render(Opal.global.React.Fragment, null, null, block); }
-        }
+        `Opal.React.internal_prepare_args_and_render(Opal.global.React.Fragment, args, block)`
       end
 
-      def Portal(dom_node, &block)
+      def Portal(element_or_query, &block)
+        if `(typeof element_or_query === 'string')` || (`(typeof element_or_query.$class === 'function')` && element_or_query.class == String)
+          element = `document.body.querySelector(element_or_query)`
+        elsif `(typeof element_or_query.$is_a === 'function')` && element_or_query.is_a?(Browser::DOM::Node)
+          element = element_or_query.to_n
+        else
+          element = element_or_query
+        end
         %x{
           var children = null;
           var block_result = null;
@@ -27,34 +26,18 @@ module React
               Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
             }
           }
-          var react_element = Opal.global.React.createPortal(Opal.React.render_buffer.pop(), dom_node);
+          var react_element = Opal.global.React.createPortal(Opal.React.render_buffer.pop(), element);
           Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
           return null;
         }
       end
 
       def StrictMode(*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(Opal.global.React.StrictMode, null, last_arg, null); }
-              else { Opal.React.internal_render(Opal.global.React.StrictMode, args[0], last_arg, null); }
-            } else { Opal.React.internal_render(Opal.global.React.StrictMode, args[0], null, block); }
-          } else { Opal.React.internal_render(Opal.global.React.StrictMode, null, null, block); }
-        }
+        `Opal.React.internal_prepare_args_and_render(Opal.global.React.StrictMode, args, block)`
       end
 
       def Suspense(*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(Opal.global.React.Suspense, null, last_arg, null); }
-              else { Opal.React.internal_render(Opal.global.React.Suspense, args[0], last_arg, null); }
-            } else { Opal.React.internal_render(Opal.global.React.Suspense, args[0], null, block); }
-          } else { Opal.React.internal_render(Opal.global.React.Suspense, null, null, block); }
-        }
+        `Opal.React.internal_prepare_args_and_render(Opal.global.React.Suspense, args, block)`
       end
     end
   end

data/lib/react/component/initializer.rb

@@ -3,8 +3,8 @@ module React
     module Initializer
       def initialize(native_component)
         @native = native_component
-        @props = ::React::Component::Props.new(@native.JS[:props])
-        @state = ::React::Component::State.new(@native)
+        @props = `Opal.React.Component.Props.$new(#@native.props)`
+        @state = `Opal.React.Component.State.$new(#@native)`
       end
     end
   end

data/lib/react/component/mixin.rb

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

data/lib/react/component/native_component_constructor.rb

@@ -36,6 +36,13 @@ module React
             static get displayName() {
               return #{component_name};
             }
+            render() {
+              Opal.React.render_buffer.push([]);
+              Opal.React.active_components.push(this);
+              #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              Opal.React.active_components.pop();
+              return Opal.React.render_buffer.pop();
+            }
             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)});

data/lib/react/component/props.rb

@@ -4,13 +4,25 @@ module React
       include ::Native::Wrapper
 
       def method_missing(prop, *args, &block)
-        @native.JS[`Opal.React.lower_camelize(prop)`]
+        %x{
+          var prop_name = Opal.React.lower_camelize(prop);
+          if (typeof #@native[prop_name] === 'undefined') {
+            return #{nil};
+          } else {
+            return #@native[prop_name];
+          }
+        }
+      end
+
+      def classes
+        @classes ||= `Opal.React.Component.Styles.$new(#@native.classes)`
       end
 
       def isomorfeus_store
         @native.JS[:isomorfeus_store]
       end
 
+      # for router convenience
       def history
         return @history if @history
         return nil unless @native.JS[:history]

data/lib/react/component/resolution.rb

@@ -34,42 +34,41 @@ module React
           var component_type = typeof Opal.global[component_name];
           if (component_type === "function" || component_type === "object") {
             component = Opal.global[component_name];
-          }
-          else {
+          } 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);
-                component_type = typeof constant.react_component;
-                if (component_type === "function" || component_type === "object") {
+                if (typeof constant.react_component !== 'undefined') {
                   component = constant.react_component;
                   break;
                 }
-              }
-              catch(err) {
+              } catch(err) {
                 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)};
           }
         }
       end
-
     end
   end
 end

data/lib/react/component/styles.rb

@@ -0,0 +1,23 @@
+module React
+  module Component
+    class Styles
+      def initialize(native)
+        @native = native
+      end
+
+      def method_missing(prop, *args, &block)
+        %x{
+          if (typeof #@native[prop] === 'undefined') {
+            return #{nil};
+          } else {
+            return #@native[prop];
+          }
+        }
+      end
+
+      def to_n
+        @native
+      end
+    end
+  end
+end

data/lib/react/context_wrapper.rb

@@ -2,6 +2,10 @@ module React
   class ContextWrapper
     include ::Native::Wrapper
 
+    def is_wrapped_context
+      true
+    end
+
     def Consumer(*args, &block)
       %x{
         var children = null;

data/lib/react/function_component/api.rb

@@ -0,0 +1,83 @@
+module React
+  module FunctionComponent
+    module API
+      attr_accessor :props
+
+      def initialize(props)
+        @props = ::React::Component::Props.new(props)
+      end
+
+      def use_callback(deps, &block)
+        %x{
+          Opal.global.React.useCallback(function() {
+            #{block.call}
+          }, deps);
+        }
+      end
+
+      def use_context(context)
+        `(typeof context.$is_wrapped_context !== 'undefined')` ? context.to_n : context
+        `Opal.global.React.useContext(native_context)`
+      end
+
+      def use_debug_value(value)
+        `Opal.global.React.useDebugValue(value)`
+      end
+
+      def use_effect(&block)
+        %x{
+          Opal.global.React.useEffect(function() {
+            #{block.call}
+          });
+        }
+      end
+
+      def use_imperative_handle(ref, *deps, &block)
+        native_ref = `(typeof ref.$is_wrapped_ref !== 'undefined')` ? ref.to_n : ref
+        %x{
+          Opal.global.React.useImperativeHandle(native_ref, function() {
+            #{block.call}
+          }, deps);
+        }
+      end
+
+      def use_layout_effect(&block)
+        %x{
+          Opal.global.React.useLayoutEffect(function() {
+            #{block.call}
+          });
+        }
+      end
+
+      def use_memo(*deps, &block)
+        %x{
+          Opal.global.React.useMemo(function() {
+            #{block.call}
+          }, deps);
+        }
+      end
+
+      def use_reducer(inital_state, &block)
+        state = nil
+        dispatcher = nil
+        %x{
+          [state, dispatcher] = Opal.global.React.useReducer(function(state, action) {
+            #{block.call(state, action)}
+          }, initial_state);
+        }
+        [state, proc { |arg| `dispatcher(arg)` }]
+      end
+
+      def use_ref(initial_value)
+        React::Ref.new(`Opal.global.React.useRef(initial_value)`)
+      end
+
+      def use_state(initial_value)
+        initial = nil
+        setter = nil
+        `[initial, setter] = Opal.global.React.useState(initial_value);`
+        [initial, proc { |arg| `setter(arg)` }]
+      end
+    end
+  end
+end