isomorfeus-react 16.5.1

data/lib/lucid_component/api.rb

@@ -0,0 +1,97 @@
+module LucidComponent
+  module API
+    def self.included(base)
+      base.instance_exec do
+        def app_store
+          @default_app_store_defined = true
+          @default_app_store ||= ::React::ReduxComponent::AppStoreDefaults.new(default_props)
+        end
+
+        def class_store
+          @default_class_store_defined = true
+          @default_class_store ||= ::React::ReduxComponent::ComponentClassStoreDefaults.new(default_props, self.to_s)
+        end
+
+        def store
+          @default_instance_store_defined = true
+          @default_class_store ||= ::React::ReduxComponent::ComponentInstanceStoreDefaults.new(default_props, self.to_s)
+        end
+
+        def prop(name, options = `null`)
+          name = `Opal.React.lower_camelize(name)`
+          if options
+            if options.has_key?(:default)
+              %x{
+                if (typeof self.lucid_react_component.defaultProps == "undefined") {
+                  self.lucid_react_component.defaultProps = { isomorfeus_store: Opal.Hash.$new() };
+                }
+                self.lucid_react_component.defaultProps[name] = options.$fetch("default");
+              }
+            end
+            if options.has_key?(:class)
+              %x{
+                if (typeof self.lucid_react_component.propTypes == "undefined") {
+                  self.lucid_react_component.propTypes = {};
+                  self.lucid_react_component.propValidations = {};
+                  self.lucid_react_component.propValidations[name] = {};
+                }
+                self.lucid_react_component.propTypes[name] = self.lucid_react_component.prototype.validateProp;
+                self.lucid_react_component.propValidations[name].ruby_class = options.$fetch("class");
+              }
+            elsif options.has_key?(:is_a)
+              %x{
+                if (typeof self.lucid_react_component.propTypes == "undefined") {
+                  self.lucid_react_component.propTypes = {};
+                  self.lucid_react_component.propValidations = {};
+                  self.lucid_react_component.propValidations[name] = {};
+                }
+                self.lucid_react_component.propTypes[name] = self.lucid_react_component.prototype.validateProp;
+                self.lucid_react_component.propValidations[name].is_a = options.$fetch("is_a");
+              }
+            end
+            if options.has_key?(:required)
+              %x{
+                if (typeof self.lucid_react_component.propTypes == "undefined") {
+                  self.lucid_react_component.propTypes = {};
+                  self.lucid_react_component.propValidations = {};
+                  self.lucid_react_component.propValidations[name] = {};
+                }
+                self.lucid_react_component.propTypes[name] = self.lucid_react_component.prototype.validateProp;
+                self.lucid_react_component.propValidations[name].required = options.$fetch("required");
+              }
+            elsif !options.has_key?(:default)
+              %x{
+                if (typeof self.lucid_react_component.propTypes == "undefined") {
+                  self.lucid_react_component.propTypes = {};
+                  self.lucid_react_component.propValidations = {};
+                }
+                self.lucid_react_component.propTypes[name] = self.lucid_react_component.prototype.validateProp;
+                self.lucid_react_component.propValidations[name].required = true;
+              }
+            end
+          else
+            %x{
+              if (typeof self.lucid_react_component.propTypes == "undefined") {
+                self.lucid_react_component.propTypes = {};
+                self.lucid_react_component.propValidations = {};
+                self.lucid_react_component.propValidations[name] = {};
+              }
+              self.lucid_react_component.propTypes[name] = self.lucid_react_component.prototype.validateProp;
+              self.lucid_react_component.propValidations[name].required = options.$fetch("required");
+            }
+          end
+        end
+
+        def default_props
+          return @default_props if @default_props
+          %x{
+            if (typeof self.lucid_react_component.defaultProps == "undefined") {
+              self.lucid_react_component.defaultProps = { isomorfeus_store: Opal.Hash.$new() };
+            }
+          }
+          @default_props = React::Component::Props.new(`self.lucid_react_component.defaultProps`)
+        end
+      end
+    end
+  end
+end

data/lib/lucid_component/base.rb

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

data/lib/lucid_component/event_handler.rb

@@ -0,0 +1,17 @@
+module LucidComponent
+  module EventHandler
+    def event_handlers
+      @event_handlers ||= []
+    end
+
+    def event_handler(name, &block)
+      event_handlers << name
+      %x{
+        self.lucid_react_component.prototype[name] = function(event, info) {
+          #{ruby_event = ::React::SyntheticEvent.new(`event`)};
+          #{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
+        }
+      }
+    end
+  end
+end

data/lib/lucid_component/initializer.rb

@@ -0,0 +1,12 @@
+module LucidComponent
+  module Initializer
+    def initialize(native_component)
+      @native = native_component
+      @app_store = ::React::ReduxComponent::AppStoreProxy.new(self, 'props')
+      @class_store = ::React::ReduxComponent::ClassStoreProxy.new(self, 'props')
+      @props = ::React::Component::Props.new(@native.JS[:props])
+      @state = ::React::Component::State.new(@native)
+      @store = ::React::ReduxComponent::InstanceStoreProxy.new(self, 'props')
+    end
+  end
+end

data/lib/lucid_component/mixin.rb

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

data/lib/lucid_component/native_component_constructor.rb

@@ -0,0 +1,131 @@
+module LucidComponent
+  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 = function(props) {
+          return React.createElement(LucidApplicationContext.Consumer, null, function(store) {
+            var store_props = Object.assign({}, props, { isomorfeus_store: store });
+            return React.createElement(base.lucid_react_component, store_props);
+          });
+        }
+        base.lucid_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);
+            this.__object_id = this.__ruby_instance.$object_id().$to_s();
+            if (!this.state.component_state) {
+              this.state.component_state = {};
+              this.state.component_state[this.__object_id] = {};
+            };
+            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();
+              }
+            }
+          }
+          data_access() {
+            return this.props.isomorfeus_store
+          }
+          static get displayName() {
+            return #{component_name};
+          }
+          register_used_store_path(path) {
+            this.used_store_paths.push(path);
+          }
+          shouldComponentUpdate(next_props, next_state) {
+            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 (property === "isomorfeus_store") {
+                var res = this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store);
+                if (res) { return true; }
+              }
+              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;
+          }
+          scu_for_used_store_paths(self, current_state, next_state) {
+            var unique_used_store_paths = self.used_store_paths.filter(function(elem, pos) {
+              return (self.used_store_paths.indexOf(elem) === pos);
+            });
+            var used_length = unique_used_store_paths.length;
+            var store_path;
+            var current_value;
+            var next_value;
+            for (var i = 0; i < used_length; i++) {
+              store_path = unique_used_store_paths[i];
+              current_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, current_state);
+              next_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, next_state);
+              if (current_value !== next_value) { return true; };
+            }
+            return false;
+          }
+          validateProp(props, propName, componentName) {
+            if (propName === "isomorfeus_store") { return null };
+            var prop_data = base.lucid_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

data/lib/react.rb

@@ -0,0 +1,147 @@
+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 component, can be a object with the event handlers
+  # language=JS
+  %x{
+    self.render_buffer = [];
+
+    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.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 {
+            result[Opal.React.lower_camelize(keys[i])] = ruby_style_props['$[]'](keys[i]);
+          }
+        }
+        return result;
+    }
+
+    self.internal_render = function(component, props, block) {
+      var children;
+      var block_result;
+      var react_element;
+
+      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; }
+      }
+      react_element = React.createElement(component, props, children);
+      Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(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`
+    `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] = 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{
+      var component = null;
+      var block_result = null;
+      var native_props = null;
+
+      if (typeof type.react_component == "function") {
+        component = type.react_component;
+      }
+      else {
+        component = type;
+      }
+
+      Opal.React.render_buffer.push([]);
+      #{
+        native_props = `Opal.React.to_native_react_props(props)` if props;
+      }
+      if (block !== nil) {
+        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 React.createElement(component, native_props, children);
+    }
+  end
+
+  def self.create_factory(type)
+    native_function = `React.createFactory(type)`
+    proc { `native_function.call()` }
+  end
+
+
+  def self.create_ref
+    React::Ref.new(`React.createRef()`)
+  end
+
+  def self.forwardRef(&block)
+    # TODO whats the return here? A React:Element?, doc says a React node, whats that?
+    `React.forwardRef( function(props, ref) { return block.$call().$to_n(); })`
+  end
+
+  def self.isValidElement(react_element)
+    `React.isValidElement(react_element)`
+  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