isomorfeus-react 16.5.1

data/lib/react/component/api.rb

@@ -0,0 +1,226 @@
+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|
+              %x{
+                var props = null;
+
+                if (args.length > 0) {
+                  props = Opal.React.to_native_react_props(args[0]);
+                }
+                Opal.React.internal_render(#{base}.react_component, props, block);
+              }
+            end
+          else
+            Object.define_method(base.to_s) do |*args, &block|
+              %x{
+                var props = null;
+
+                if (args.length > 0) {
+                  props = Opal.React.to_native_react_props(args[0]);
+                }
+                Opal.React.internal_render(#{base}.react_component, props, block);
+              }
+            end
+          end
+
+
+          attr_accessor :props
+          attr_accessor :state
+
+          def ref(ref_name, &block)
+            defined_refs.JS[ref_name] = if block_given?
+                                          block
+                                        else
+                                          `null`
+                                        end
+          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 prop(name, options = `null`)
+            name = `Opal.React.lower_camelize(name)`
+            if options
+              if options.has_key?(:default)
+                %x{
+                  if (typeof self.react_component.defaultProps == "undefined") {
+                    self.react_component.defaultProps = {};
+                  }
+                  self.react_component.defaultProps[name] = options.$fetch("default");
+                }
+              end
+              if options.has_key?(:class)
+                %x{
+                  if (typeof self.react_component.propTypes == "undefined") {
+                    self.react_component.propTypes = {};
+                    self.react_component.propValidations = {};
+                    self.react_component.propValidations[name] = {};
+                  }
+                  self.react_component.propTypes[name] = self.react_component.prototype.validateProp;
+                  self.react_component.propValidations[name].ruby_class = options.$fetch("class");
+                }
+              elsif options.has_key?(:is_a)
+                %x{
+                  if (typeof self.react_component.propTypes == "undefined") {
+                    self.react_component.propTypes = {};
+                    self.react_component.propValidations = {};
+                    self.react_component.propValidations[name] = {};
+                  }
+                  self.react_component.propTypes[name] = self.react_component.prototype.validateProp;
+                  self.react_component.propValidations[name].is_a = options.$fetch("is_a");
+                }
+              end
+              if options.has_key?(:required)
+                %x{
+                  if (typeof self.react_component.propTypes == "undefined") {
+                    self.react_component.propTypes = {};
+                    self.react_component.propValidations = {};
+                    self.react_component.propValidations[name] = {};
+                  }
+                  self.react_component.propTypes[name] = self.react_component.prototype.validateProp;
+                  self.react_component.propValidations[name].required = options.$fetch("required");
+                }
+              elsif !options.has_key?(:default)
+                %x{
+                  if (typeof self.react_component.propTypes == "undefined") {
+                    self.react_component.propTypes = {};
+                    self.react_component.propValidations = {};
+                  }
+                  self.react_component.propTypes[name] = self.react_component.prototype.validateProp;
+                  self.react_component.propValidations[name].required = true;
+                }
+              end
+            else
+              %x{
+                if (typeof self.react_component.propTypes == "undefined") {
+                  self.react_component.propTypes = {};
+                  self.react_component.propValidations = {};
+                  self.react_component.propValidations[name] = {};
+                }
+                self.react_component.propTypes[name] = self.react_component.prototype.validateProp;
+                self.react_component.propValidations[name].required = options.$fetch("required");
+              }
+            end
+          end
+
+          def default_props
+            return @default_props if @default_props
+            %x{
+              if (typeof self.react_component.defaultProps == "undefined") {
+                self.lucid_react_component.defaultProps = {};
+              }
+            }
+            @default_props = React::Component::Props.new(`self.react_component.defaultProps`)
+          end
+
+          def component_did_catch(&block)
+            # TODO convert error and info
+            %x{
+              self.react_component.prototype.componentDidCatch = function(error, info) {
+                return #{`this.__ruby_instance`.instance_exec(error, info, &block)};
+              }
+            }
+          end
+
+          def component_did_mount(&block)
+            %x{
+              self.react_component.prototype.componentDidMount = function() {
+                return #{`this.__ruby_instance`.instance_exec(&block)};
+              }
+            }
+          end
+
+          def component_did_update(&block)
+            %x{
+              self.react_component.prototype.componentDidUpdate = function() {
+                return #{`this.__ruby_instance`.instance_exec(&block)};
+              }
+            }
+          end
+
+          def component_will_unmount(&block)
+            %x{
+              self.react_component.prototype.componentWillUnmount = function() {
+                return #{`this.__ruby_instance`.instance_exec(&block)};
+              }
+            }
+          end
+
+          def get_derived_state_from_error(&block)
+            %x{
+              self.react_component.prototype.getDerivedStateFromError = function(error) {
+                return #{`this.__ruby_instance`.instance_exec(error, &block)};
+              }
+            }
+          end
+
+          def get_derived_state_from_props(&block)
+            %x{
+              self.react_component.prototype.getDerivedStateFromProps = function(props, state) {
+                return #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`props`), `Opal.Hash.$new(state)`, &block)};
+              }
+            }
+          end
+
+          def get_snapshot_before_update(&block)
+            %x{
+              self.react_component.prototype.getSnapshotBeforeUpdate = function(prev_props, prev_state) {
+                return #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`prev_props`), `Opal.Hash.$new(prev_state)`, &block)};
+              }
+            }
+          end
+
+          def render(&block)
+            %x{
+              self.react_component.prototype.render = function() {
+                Opal.React.render_buffer.push([]);
+                Opal.React.active_components.push(this);
+                #{`this.__ruby_instance`.instance_exec(&block)};
+                Opal.React.active_components.pop();
+                return Opal.React.render_buffer.pop();
+              }
+            }
+          end
+        end
+      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 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/elements.rb

@@ -0,0 +1,78 @@
+module React
+  module Component
+    module Elements
+      # https://www.w3.org/TR/html52/fullindex.html#index-elements
+      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
+      ] +
+      # 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
+        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|
+          %x{
+            var props = null;
+
+            if (args.length > 0) {
+              props = Opal.React.to_native_react_props(args[0]);
+            }
+            Opal.React.internal_render(element, props, block);
+          }
+        end
+        define_method(`element.toUpperCase()`) do |*args, &block|
+          %x{
+            var props = null;
+
+            if (args.length > 0) {
+              props = Opal.React.to_native_react_props(args[0]);
+            }
+            Opal.React.internal_render(element, props, 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(props = `null`, &block)
+        %x{
+          var native_props = null;
+
+          if (props) {
+            native_props = Opal.React.to_native_react_props(args[0]);
+          }
+          Opal.React.internal_render(React.Fragment, native_props, block);
+        }
+      end
+
+      def Portal(dom_node, &block)
+        %x{
+          var children = null;
+          var block_result = null;
+
+          Opal.React.render_buffer.push([]);
+          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);
+            }
+          }
+          var react_element = React.createPortal(Opal.React.render_buffer.pop(), dom_node);
+          Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
+          return null;
+        }
+      end
+
+      def StrictMode(props = `null`, &block)
+        %x{
+          var native_props = null;
+
+          if (props) {
+            native_props = Opal.React.to_native_react_props(args[0]);
+          }
+          Opal.React.internal_render(React.StrictMode, native_props, 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 = ::React::Component::Props.new(@native.JS[:props])
+        @state = ::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