isomorfeus-react 16.10.0 → 16.10.1

data/lib/lucid_prop_declaration/mixin.rb

@@ -0,0 +1,91 @@
+module LucidPropDeclaration
+  module Mixin
+    if RUBY_ENGINE == 'opal'
+      def self.extended(base)
+
+        def prop(prop_name, validate_hash = { required: true })
+          validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
+          if validate_hash.key?(:default)
+            %x{
+              if (base.lucid_react_component) {
+                let react_prop_name = Opal.React.lower_camelize(prop_name);
+                #{value = validate_hash[:default]}
+                if (!base.lucid_react_component.defaultProps) { base.lucid_react_component.defaultProps = {}; }
+                base.lucid_react_component.defaultProps[react_prop_name] = value;
+                if (!base.lucid_react_component.propTypes) { base.lucid_react_component.propTypes = {}; }
+                base.lucid_react_component.propTypes[react_prop_name] = base.lucid_react_component.prototype.validateProp;
+              } else if (base.react_component) {
+                let react_prop_name = Opal.React.lower_camelize(prop_name);
+                #{value = validate_hash[:default]}
+                if (!base.react_component.defaultProps) { base.react_component.defaultProps = {}; }
+                base.react_component.defaultProps[react_prop_name] = value;
+                if (!base.react_component.propTypes) { base.react_component.propTypes = {}; }
+                base.react_component.propTypes[react_prop_name] = base.react_component.prototype.validateProp;
+              }
+            }
+          end
+          declared_props[prop_name.to_sym] = validate_hash
+        end
+      end
+
+      def validate_function
+        %x{
+          if (typeof self.validate_function === 'undefined') {
+            self.validate_function = function(props_object) {
+              try { self.$validate_props(Opal.Hash.$new(props_object)) }
+              catch (e) { return e.message; }
+            }
+          }
+          return self.validate_function;
+        }
+      end
+
+      def validate_prop_function(prop)
+        function_name = "validate_#{prop}_function"
+        %x{
+          if (typeof self[function_name] === 'undefined') {
+            self[function_name] = function(value) {
+              try { self.$validate_prop(prop, value); }
+              catch (e) { return e.message; }
+            }
+          }
+          return self[function_name];
+        }
+      end
+    else
+      def prop(prop_name, validate_hash = { required: true })
+        validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
+        declared_props[prop_name.to_sym] = validate_hash
+      end
+    end
+
+    def declared_props
+      @declared_props ||= {}
+    end
+
+    def validate
+      Isomorfeus::Props::ValidateHashProxy.new
+    end
+
+    def validate_prop(prop, value)
+      return false unless declared_props.key?(prop)
+      validator = Isomorfeus::Props::Validator.new(self, prop, value, declared_props[prop])
+      validator.validate!
+      true
+    end
+
+    def validate_props(props)
+      declared_props.each_key do |prop|
+        if declared_props[prop].key?(:required) && declared_props[prop][:required] && !props.key?(prop)
+          raise "Required prop #{prop} not given!"
+        end
+      end
+      result = true
+      props.each do |p, v|
+        r = validate_prop(p, v)
+        result = false unless r
+      end
+      result
+    end
+  end
+end

data/lib/react.rb

@@ -0,0 +1,195 @@
+module React
+  # to_native_react_props: the native_component params is used for event handlers, it keeps the event handlers
+  # it does not need to be compone nt, can be a object with the event handlers
+  # language=JS
+  %x{
+    self.render_buffer = [];
+
+    self.set_validate_prop = function(component, prop_name) {
+      if (typeof component.react_component.propTypes == "undefined") {
+        component.react_component.propTypes = {};
+        component.react_component.propValidations = {};
+        component.react_component.propValidations[prop_name] = {};
+      }
+      component.react_component.propTypes[prop_name] = component.react_component.prototype.validateProp;
+    };
+
+    self.lower_camelize = function(snake_cased_word) {
+      var parts = snake_cased_word.split('_');
+      var res = parts[0];
+
+      for (var i = 1; i < parts.length; i++) {
+            res += parts[i][0].toUpperCase() + parts[i].slice(1);
+      }
+      return res;
+    };
+
+    self.native_element_or_component_to_ruby = function (element) {
+      if (typeof element.__ruby_instance !== 'undefined') { return element.__ruby_instance }
+      if (element instanceof Element || element instanceof Node) { return #{Browser::Element.new(`element`)} }
+      return element;
+    };
+
+    self.to_native_react_props = function(ruby_style_props) {
+        var result = {};
+        var keys = ruby_style_props.$keys();
+        var keys_length = keys.length;
+        for (var i = 0; i < keys_length; i++) {
+          if (keys[i].startsWith("on_")) {
+            var handler = ruby_style_props['$[]'](keys[i]);
+            if (typeof handler === "function") {
+              result[Opal.React.lower_camelize(keys[i])] = handler;
+            } else {
+              var active_component = Opal.React.active_component();
+              result[Opal.React.lower_camelize(keys[i])] = active_component[handler];
+            }
+          } else if (keys[i].startsWith("aria_")) {
+            result[keys[i].replace("_", "-")] = ruby_style_props['$[]'](keys[i]);
+          } else if (keys[i] === "style") {
+            var val = ruby_style_props['$[]'](keys[i]);
+            if (typeof val.$$is_hash !== "undefined") { val = val.$to_n() }
+            result["style"] = val;
+          } else {
+            result[Opal.React.lower_camelize(keys[i])] = ruby_style_props['$[]'](keys[i]);
+          }
+        }
+        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) { return Opal.React.internal_render(component, null, last_arg, null); }
+          else { return Opal.React.internal_render(component, args[0], last_arg, null); }
+        } else { return Opal.React.internal_render(component, args[0], null, block); }
+      } else { return Opal.React.internal_render(component, null, null, block); }
+    };
+
+    self.internal_render = function(component, props, string_child, block) {
+      let children;
+      let react_element;
+      let native_props = null;
+
+      if (string_child) {
+        children = string_child;
+      } else if (block && 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; }
+      }
+      if (props && props !== nil) { native_props = Opal.React.to_native_react_props(props); }
+      react_element = Opal.global.React.createElement(component, native_props, children);
+      Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
+      return react_element;
+    };
+
+    self.active_components = [];
+
+    self.active_component = function() {
+      var length = Opal.React.active_components.length;
+      if (length === 0) { return null; };
+      return Opal.React.active_components[length-1];
+    };
+
+    self.active_redux_components = [];
+
+    self.active_redux_component = function() {
+      var length = Opal.React.active_redux_components.length;
+      if (length === 0) { return null; };
+      return Opal.React.active_redux_components[length-1];
+    };
+  }
+
+  def self.clone_element(ruby_react_element, props = nil, children = nil, &block)
+    block_result = `null`
+    if block_given?
+      block_result = block.call
+      block_result = `null` unless block_result
+    end
+    native_props = props ? `Opal.React.to_native_react_props(props)` : `null`
+    `Opal.global.React.cloneElement(ruby_react_element.$to_n(), native_props, block_result)`
+  end
+
+  def self.create_context(const_name, default_value)
+    %x{
+      Opal.global[const_name] = Opal.global.React.createContext(default_value);
+      var new_const = #{React::ContextWrapper.new(`Opal.global[const_name]`)};
+      #{Object.const_set(const_name, `new_const`)};
+      return new_const;
+    }
+  end
+
+  def self.create_element(type, props = nil, children = nil, &block)
+    %x{
+      let component = null;
+      let native_props = null;
+      if (typeof type.react_component !== 'undefined') {
+        component = type.react_component;
+      } else {
+        component = type;
+      }
+
+      Opal.React.render_buffer.push([]);
+      if (block !== nil) {
+        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; }
+      }
+      if (props && props !== nil) { native_props = Opal.React.to_native_react_props(props); }
+      return Opal.global.React.createElement(component, native_props, children);
+    }
+  end
+
+  def self.create_factory(type)
+    native_function = `Opal.global.React.createFactory(type)`
+    proc { `native_function.call()` }
+  end
+
+  def self.create_ref
+    React::Ref.new(`Opal.global.React.createRef()`)
+  end
+
+  def self.forwardRef(&block)
+    # TODO whats the return here? A React:Element?, doc says a React node, whats that?
+    `Opal.global.React.forwardRef( function(props, ref) { return block.$call().$to_n(); })`
+  end
+
+  def self.is_valid_element(react_element)
+    `Opal.global.React.isValidElement(react_element)`
+  end
+
+  def self.lazy(import_statement_function)
+    `Opal.global.React.lazy(import_statement_function)`
+  end
+
+  def self.memo(function_component, &block)
+    if block_given?
+      %x{
+        var fun = function(prev_props, next_props) {
+          return #{block.call(::React::Component::Props.new(`{props: prev_props}`), ::React::Component::Props.new(`{props: next_props}`))};
+        }
+        return Opal.global.React.memo(function_component, fun);
+      }
+    else
+      `Opal.global.React.memo(function_component)`
+    end
+  end
+end

data/lib/react/active_support_support.rb

@@ -0,0 +1,13 @@
+class String
+  def demodulize
+    if i = self.rindex("::")
+      self[(i + 2)..-1]
+    else
+      self
+    end
+  end
+
+  def deconstantize
+    self[0, self.rindex("::") || 0] # implementation based on the one in facets' Module#spacename
+  end
+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

@@ -0,0 +1,80 @@
+module React
+  module Component
+    module API
+      def self.included(base)
+        base.instance_exec do
+          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
+
+          attr_accessor :props
+          attr_accessor :state
+
+          def ref(ref_name, &block)
+            defined_refs.JS[ref_name] = block_given? ? block : `null`
+          end
+
+          def defined_refs
+            @defined_ref ||= `{}`
+          end
+
+          def default_state_defined
+            @default_state_defined
+          end
+
+          def state
+            return @default_state if @default_state
+            @default_state_defined = true
+            %x{
+              var native_state = {state: {}};
+              native_state.setState = function(new_state, callback) {
+                for (var key in new_state) {
+                  this.state[key] = new_state[key];
+                }
+                if (callback) { callback.call(); }
+              }
+            }
+            @default_state = React::Component::State.new(`native_state`)
+          end
+
+          def render(&block)
+            `base.render_block = block`
+          end
+        end
+      end
+
+      def display_name
+        @native.JS[:displayName]
+      end
+
+      def force_update(&block)
+        if block_given?
+          # this maybe needs instance_exec too
+          @native.JS.forceUpdate(`function() { block.$call(); }`)
+        else
+          @native.JS.forceUpdate
+        end
+      end
+
+      def ref(name)
+        `#@native[name]`
+      end
+
+      def ruby_ref(name)
+        return `#@native[name]` if `(typeof #@native[name] === 'function')`
+        React::Ref::new(`#@native[name]`)
+      end
+
+      def set_state(updater, &callback)
+        @state.set_state(updater, &callback)
+      end
+    end
+  end
+end

data/lib/react/component/base.rb

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

data/lib/react/component/callbacks.rb

@@ -0,0 +1,106 @@
+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({props: 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 (typeof result.$to_n === 'function') { result = result.$to_n() }
+                if (result === Opal.nil) { return null; }
+                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);
+                var result = #{`this.__ruby_instance`.instance_exec(`Opal.React.Component.Props.$new({props: props})`,
+                                                                     `Opal.React.Component.State.$new({state: state})`, &block)};
+                Opal.React.active_redux_components.pop();
+                if (typeof result.$to_n === 'function') { result = result.$to_n() }
+                if (result === Opal.nil) { return null; }
+                return result;
+              }
+              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) {
+
+                var result = #{`this.__ruby_instance`.instance_exec(`Opal.React.Component.Props.$new({props: prev_props})`,
+                                                                    `Opal.React.Component.State.$new({state: prev_state})`, &block)};
+                Opal.React.active_redux_components.pop();
+                if (result === Opal.nil) { return null; }
+                return result;
+              }
+              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