isomorfeus-react 16.10.0 → 16.10.1

data/lib/react/component/elements.rb

@@ -0,0 +1,60 @@
+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
+        canvas caption cite code col colgroup
+        data datalist dd del details dfn dialog div dl dt
+        em embed
+        fieldset figcaption figure footer form
+        h1 h2 h3 h4 h5 h6 head header hr html
+        i iframe img input ins
+        kbd
+        label legend li link
+        main map mark meta meter
+        nav noscript
+        object ol optgroup option output
+        p param picture pre progress
+        q
+        rp rt rtc ruby
+        s samp script section select small source span strong style sub summary sup
+        table tbody td template textarea tfoot th thead time title tr track
+        u ul
+        var video
+        wbr
+        altGlyph altGlyphDef altGlyphItem animate animateColor animateMotion animateTransform
+        circle clipPath color-profile cursor
+        defs desc
+        ellipse
+        feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting
+        feDisplacementMap feDistantLight feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur
+        feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting
+        feSpotLight feTile feTurbulence
+        filter font font-face font-face-format font-face-name font-face-src font-face-uri foreignObject
+        g glyph glyphRef
+        hkern
+        image
+        line linearGradient
+        marker mask metadata missing-glyph mpath
+        path pattern polygon polyline
+        radialGradient rect
+        script set stop style svg switch symbol
+        text textPath tref tspan
+        use
+        view vkern
+      ]
+
+      SUPPORTED_HTML_AND_SVG_ELEMENTS.each do |element|
+        define_method(element) do |*args, &block|
+          `Opal.React.internal_prepare_args_and_render(element, args, block)`
+        end
+        define_method(`element.toUpperCase()`) do |*args, &block|
+          `Opal.React.internal_prepare_args_and_render(element, args, block)`
+        end
+      end
+    end
+  end
+end

data/lib/react/component/event_handler.rb

@@ -0,0 +1,19 @@
+module React
+  module Component
+    module EventHandler
+      def event_handlers
+        @event_handlers ||= []
+      end
+
+      def event_handler(name, &block)
+        event_handlers << name
+        %x{
+          self.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
+end

data/lib/react/component/features.rb

@@ -0,0 +1,47 @@
+module React
+  module Component
+    module Features
+      def Fragment(*args, &block)
+        `Opal.React.internal_prepare_args_and_render(Opal.global.React.Fragment, args, block)`
+      end
+
+      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::Element)
+          element = element_or_query.to_n
+        else
+          element = element_or_query
+        end
+        %x{
+          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);
+            }
+          }
+          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 react_element;
+        }
+      end
+
+      def Profiler(*args, &block)
+        `Opal.React.internal_prepare_args_and_render(Opal.global.React.Profiler, args, block)`
+      end
+
+      def StrictMode(*args, &block)
+        `Opal.React.internal_prepare_args_and_render(Opal.global.React.StrictMode, args, block)`
+      end
+
+      def Suspense(*args, &block)
+        `Opal.React.internal_prepare_args_and_render(Opal.global.React.Suspense, args, block)`
+      end
+    end
+  end
+end

data/lib/react/component/history.rb

@@ -0,0 +1,36 @@
+module React
+  module Component
+    class History
+      include ::Native::Wrapper
+
+      alias_native :block, :block
+      alias_native :create_href, :createHref
+      alias_native :go, :go
+      alias_native :go_back, :goBack
+      alias_native :go_forward, :goForward
+      alias_native :listen, :listen
+      alias_native :push, :push
+      alias_native :replace, :replace
+
+      alias _react_component_hitory_original_method_missing method_missing
+
+      def method_missing(prop, *args, &block)
+        @native.JS[:params].JS[prop]
+      end
+
+      def location
+        return @location if @location
+        return nil unless @native.JS[:props].JS[:location]
+        if @native.JS[:props].JS[:location].JS[:pathname]
+          @location = React::Component::Location.new(@native.JS[:props].JS[:location])
+        else
+          @native.JS[:props].JS[:location]
+        end
+      end
+
+      def to_n
+        @native
+      end
+    end
+  end
+end

data/lib/react/component/initializer.rb

@@ -0,0 +1,11 @@
+module React
+  module Component
+    module Initializer
+      def initialize(native_component)
+        @native = native_component
+        @props = `Opal.React.Component.Props.$new(#@native)`
+        @state = `Opal.React.Component.State.$new(#@native)`
+      end
+    end
+  end
+end

data/lib/react/component/location.rb

@@ -0,0 +1,15 @@
+module React
+  module Component
+    class Location
+      include ::Native::Wrapper
+
+      def method_missing(prop, *args, &block)
+        @native.JS[:params].JS[prop]
+      end
+
+      def to_n
+        @native
+      end
+    end
+  end
+end

data/lib/react/component/match.rb

@@ -0,0 +1,31 @@
+module React
+  module Component
+    class Match
+      include ::Native::Wrapper
+
+      def method_missing(prop, *args, &block)
+        @native.JS[:params].JS[prop]
+      end
+
+      def is_exact
+        @native.JS[:isExact]
+      end
+
+      def params
+        self
+      end
+
+      def path
+        @native.JS[:path]
+      end
+
+      def url
+        @native.JS[:url]
+      end
+
+      def to_n
+        @native
+      end
+    end
+  end
+end

data/lib/react/component/mixin.rb

@@ -0,0 +1,19 @@
+module React
+  module Component
+    module Mixin
+      def self.included(base)
+        base.include(::Native::Wrapper)
+        base.extend(::React::Component::NativeComponentConstructor)
+        base.extend(::LucidPropDeclaration::Mixin)
+        base.extend(::React::Component::ShouldComponentUpdate)
+        base.extend(::React::Component::EventHandler)
+        base.include(::React::Component::Elements)
+        base.include(::React::Component::API)
+        base.include(::React::Component::Callbacks)
+        base.include(::React::Component::Initializer)
+        base.include(::React::Component::Features)
+        base.include(::React::Component::Resolution)
+      end
+    end
+  end
+end

data/lib/react/component/native_component_constructor.rb

@@ -0,0 +1,93 @@
+module React
+  module Component
+    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 = class extends Opal.global.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);
+              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) {
+                    element = Opal.React.native_element_or_component_to_ruby(element);
+                    #{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
+                  }
+                  this[ref] = this[ref].bind(this);
+                } else {
+                  this[ref] = Opal.global.React.createRef();
+                }
+              }
+            }
+            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)});
+              } else {
+                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 (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" && next_props[property] !== null &&
+                             typeof next_props[property]['$!='] !== "undefined" &&
+                             typeof this.props[property] !== "undefined" && this.props[property] !== null &&
+                             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 (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
+                        this.state[property] !== null && 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;
+              }
+            }
+            validateProp(props, propName, componentName) {
+              try { base.$validate_prop(propName, props[propName]) }
+              catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
+              return null;
+            }
+          }
+        }
+      end
+    end
+  end
+end

data/lib/react/component/props.rb

@@ -0,0 +1,59 @@
+module React
+  module Component
+    class Props
+      include ::Native::Wrapper
+
+      def method_missing(prop, *args, &block)
+        %x{
+          var prop_name = Opal.React.lower_camelize(prop);
+          if (typeof #@native.props[prop_name] === 'undefined') { return #{nil}; }
+          return #@native.props[prop_name];
+        }
+      end
+
+      def classes
+        @classes ||= `Opal.React.Component.Styles.$new(#@native.props.classes)`
+      end
+
+      def theme
+        @theme ||= `Opal.React.Component.Styles.$new(#@native.props.theme)`
+      end
+
+      def isomorfeus_store
+        @native.JS[:props].JS[:isomorfeus_store]
+      end
+
+      # for router convenience
+      def history
+        return nil unless @native.JS[:props].JS[:history]
+        if @native.JS[:props].JS[:history].JS[:pathname]
+          React::Component::History.new(@native.JS[:props].JS[:history])
+        else
+          @native.JS[:props].JS[:history]
+        end
+      end
+
+      def location
+        return nil unless @native.JS[:props].JS[:location]
+        if @native.JS[:props].JS[:location].JS[:pathname]
+          React::Component::Location.new(@native.JS[:props].JS[:location])
+        else
+          @native.JS[:props].JS[:location]
+        end
+      end
+
+      def match
+        return nil unless @native.JS[:props].JS[:match]
+        if @native.JS[:props].JS[:match].JS[:path]
+          React::Component::Match.new(@native.JS[:props].JS[:match])
+        else
+          @native.JS[:props].JS[:match]
+        end
+      end
+
+      def to_n
+        @native.JS[:props]
+      end
+    end
+  end
+end

data/lib/react/component/resolution.rb

@@ -0,0 +1,70 @@
+module React
+  module Component
+    module Resolution
+      def self.included(base)
+        base.instance_exec do
+          alias _react_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_component_resolution_original_const_missing(const_name)};
+              }
+            }
+          end
+        end
+      end
+
+
+      alias _react_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 {
+            var modules = self.$class().$to_s().split("::");
+            var modules_length = modules.length - 1;
+            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);
+                if (typeof constant.react_component !== 'undefined') {
+                  component = constant.react_component;
+                  break;
+                }
+              } 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_component_resolution_original_method_missing(component_name, *args, block)};
+          }
+        }
+      end
+    end
+  end
+end