isomorfeus-react 16.10.0 → 16.10.1

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/styles.rb

@@ -0,0 +1,27 @@
+module React
+  module Component
+    class Styles
+      def initialize(native)
+        @native = native
+      end
+
+      def method_missing(prop, *args, &block)
+        %x{
+          if (!#@native || typeof #@native[prop] === 'undefined') { return #{nil}; }
+          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
+
+      def to_h
+        `Opal.Hash.$new(#@native)`
+      end
+
+      def to_n
+        @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(`{props: 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(`{props: next_props}`), `Opal.Hash.$new(next_state)`, &block)};
+              }
+            }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/react/context_wrapper.rb

@@ -0,0 +1,46 @@
+module React
+  class ContextWrapper
+    include ::Native::Wrapper
+
+    def is_wrapped_context
+      true
+    end
+
+    def Consumer(*args, &block)
+      %x{
+        let children = null;
+        let props = null;
+
+        if (args.length > 0) { props = Opal.React.to_native_react_props(args[0]); }
+
+        let react_element = Opal.global.React.createElement(this.native.Consumer, props, function(value) {
+          if (block !== nil) {
+            Opal.React.render_buffer.push([]);
+            let block_result = block.$call();
+            let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
+            let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
+            if (block_result && block_result !== last_buffer_element && (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, null, block);
+      }
+    end
+  end
+end

data/lib/react/function_component/api.rb

@@ -0,0 +1,63 @@
+module React
+  module FunctionComponent
+    module API
+      attr_accessor :props
+
+      def initialize(props)
+        @props = ::React::Component::Props.new(`{props: props}`)
+      end
+
+      def use_callback(deps, &block)
+        `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)
+        `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
+        `Opal.global.React.useImperativeHandle(native_ref, function() { #{block.call} }, deps)`
+      end
+
+      def use_layout_effect(&block)
+        `Opal.global.React.useLayoutEffect(function() { #{block.call} })`
+      end
+
+      def use_memo(*deps, &block)
+        `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

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

@@ -0,0 +1,32 @@
+module React
+  module FunctionComponent
+    module Creator
+      def self.extended(base)
+        %x{
+          base.react_component = 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_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
+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

@@ -0,0 +1,62 @@
+module React
+  module FunctionComponent
+    module Resolution
+      def self.included(base)
+        base.instance_exec do
+          alias _react_function_component_resolution_original_const_missing const_missing
+
+          def const_missing(const_name)
+            # language=JS
+            %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_function_component_resolution_original_const_missing(const_name)};
+              }
+            }
+          end
+        end
+      end
+
+      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.
+        # 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;
+          var component_type = typeof Opal.global[component_name];
+          if (component_type === "function" || component_type === "object") {
+            component = Opal.global[component_name];
+          }
+          else {
+            try {
+              var constant = self.$class().$const_get(component_name, true);
+              if (typeof constant.react_component !== 'undefined') {
+                component = constant.react_component;
+              }
+            } 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) {
+            return Opal.React.internal_prepare_args_and_render(component, args, block);
+          } else {
+            return #{_react_function_component_resolution_original_method_missing(component_name, *args, block)};
+          }
+        }
+      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({props: prev_props});
+              var next_ruby_props = Opal.React.Component.Props.$new({props: 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

@@ -0,0 +1,26 @@
+module React
+  class NativeConstantWrapper
+    include ::Native::Wrapper
+
+    def initialize(native, const_name)
+      @native = native
+      @const_name = const_name
+    end
+
+    def method_missing(name, *args, &block)
+      # language=JS
+      %x{
+        var component = null;
+        var component_type = typeof #@native[name];
+        if (component_type === "function" || component_type === "object") {
+          component = #@native[name];
+        }
+        if (component) {
+          return Opal.React.internal_prepare_args_and_render(component, args, block);
+        } else {
+          #{raise NameError, "No such native Component #@const_name.#{name}"};
+        }
+      }
+    end
+  end
+end