hyper-component 0.99.6 → 1.0.alpha1

data/lib/hyperstack/internal/component/rails/server_rendering/hyper_asset_container.rb

@@ -0,0 +1,52 @@
+require 'react/server_rendering/environment_container'
+require 'react/server_rendering/manifest_container'
+require 'react/server_rendering/webpacker_manifest_container'
+
+module Hyperstack
+  module Internal
+    module Component
+      module Rails
+        module ServerRendering
+          class HyperTestAssetContainer
+            def find_asset(logical_path)
+              ::Rails.cache.read(logical_path)
+            end
+          end
+
+          class HyperAssetContainer
+            def initialize
+              @ass_containers = []
+              if assets_precompiled?
+                @ass_containers << React::ServerRendering::ManifestContainer.new if React::ServerRendering::ManifestContainer.compatible?
+              else
+                @ass_containers << React::ServerRendering::EnvironmentContainer.new if ::Rails.application.assets
+              end
+              if React::ServerRendering::WebpackerManifestContainer.compatible?
+                @ass_containers << React::ServerRendering::WebpackerManifestContainer.new
+              end
+              @ass_containers << HyperTestAssetContainer.new  if ::Rails.env.test?
+            end
+
+            def find_asset(logical_path)
+              @ass_containers.each do |ass|
+                begin
+                  asset = ass.find_asset(logical_path)
+                  return asset if asset && asset != ''
+                rescue
+                  next # no asset found, try the next container
+                end
+              end
+              raise "No asset found for #{logical_path}, tried: #{@ass_containers.map { |c| c.class.name }.join(', ')}"
+            end
+
+            private
+
+            def assets_precompiled?
+              !::Rails.application.config.assets.compile
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/hyperstack/internal/component/react_wrapper.rb

@@ -0,0 +1,308 @@
+require 'hyperstack/component/native_library'
+
+module Hyperstack
+  module Internal
+    module Component
+      # contains the name of all HTML tags, and the mechanism to register a component
+      # Provides the internal mechanisms to interface between reactrb and native components
+      # the code will attempt to create a js component wrapper on any rb class that has a
+      # render (or possibly _render_wrapper) method.  The mapping between rb and js components
+      # is kept in the @@component_classes hash.
+
+      # Also provides the mechanism to build react elements
+
+      # TOOO - the code to deal with components should be moved to a module that will be included
+      # in a class which will then create the JS component for that class.  That module will then
+      # be included in React::Component, but can be used by any class wanting to become a react
+      # component (but without other DSL characteristics.)
+      class ReactWrapper
+        @@component_classes = {}
+
+        def self.import_native_component(opal_class, native_class)
+          opal_class.instance_variable_set("@native_import", true)
+          @@component_classes[opal_class] = native_class
+        end
+
+        def self.eval_native_react_component(name)
+          component = `eval(name)`
+          raise "#{name} is not defined" if `#{component} === undefined`
+          is_component_class = `#{component}.prototype !== undefined` &&
+                                (`!!#{component}.prototype.isReactComponent` ||
+                                 `!!#{component}.prototype.render`)
+          is_functional_component = `typeof #{component} === "function"`
+          has_render_method = `typeof #{component}.render === "function"`
+          unless is_component_class || is_functional_component || has_render_method
+            raise 'does not appear to be a native react component'
+          end
+          component
+        end
+
+        def self.native_react_component?(name = nil)
+          return false unless name
+          eval_native_react_component(name)
+          true
+        rescue
+          false
+        end
+
+        def self.add_after_error_hook(klass)
+          add_after_error_hook_to_native(@@component_classes[klass])
+        end
+
+        def self.add_after_error_hook_to_native(native_comp)
+          return unless native_comp
+          %x{
+            native_comp.prototype.componentDidCatch = function(error, info) {
+              this.__opalInstanceSyncSetState = false;
+              this.__opalInstance.$component_did_catch(error, Opal.Hash.$new(info));
+            }
+          }
+        end
+
+        def self.create_native_react_class(type)
+          raise "Provided class should define `render` method"  if !(type.method_defined? :render)
+          render_fn = (type.method_defined? :_render_wrapper) ? :_render_wrapper : :render
+          # this was hashing type.to_s, not sure why but .to_s does not work as it Foo::Bar::View.to_s just returns "View"
+
+          @@component_classes[type] ||= begin
+            comp = %x{
+              class extends React.Component {
+                constructor(props) {
+                  super(props);
+                  this.mixins = #{type.respond_to?(:native_mixins) ? type.native_mixins : `[]`};
+                  this.statics = #{type.respond_to?(:static_call_backs) ? type.static_call_backs.to_n : `{}`};
+                  this.state = {};
+                  this.__opalInstanceInitializedState = false;
+                  this.__opalInstanceSyncSetState = true;
+                  this.__opalInstance = #{type.new(`this`)};
+                  this.__opalInstanceInitializedState = true;
+                  this.__opalInstanceSyncSetState = false;
+                  this.__name = #{type.name};
+                }
+                static get displayName() {
+                  if (typeof this.__name != "undefined") {
+                    return this.__name;
+                  } else {
+                    return #{type.name};
+                  }
+                }
+                static set displayName(name) {
+                  this.__name = name;
+                }
+                static get defaultProps() {
+                  return #{type.respond_to?(:default_props) ? type.default_props.to_n : `{}`};
+                }
+                static get propTypes() {
+                  return  #{type.respond_to?(:prop_types) ? type.prop_types.to_n : `{}`};
+                }
+                componentWillMount() {
+                  if (#{type.method_defined? :component_will_mount}) {
+                    this.__opalInstanceSyncSetState = true;
+                    this.__opalInstance.$component_will_mount();
+                    this.__opalInstanceSyncSetState = false;
+                  }
+                }
+                componentDidMount() {
+                  this.__opalInstance.__hyperstack_component_is_mounted = true
+                  if (#{type.method_defined? :component_did_mount}) {
+                    this.__opalInstanceSyncSetState = false;
+                    this.__opalInstance.$component_did_mount();
+                  }
+                }
+                componentWillReceiveProps(next_props) {
+                  if (#{type.method_defined? :component_will_receive_props}) {
+                    this.__opalInstanceSyncSetState = true;
+                    this.__opalInstance.$component_will_receive_props(Opal.Hash.$new(next_props));
+                    this.__opalInstanceSyncSetState = false;
+                  }
+                }
+                shouldComponentUpdate(next_props, next_state) {
+                  if (#{type.method_defined? :should_component_update?}) {
+                    this.__opalInstanceSyncSetState = false;
+                    return this.__opalInstance["$should_component_update?"](Opal.Hash.$new(next_props), Opal.Hash.$new(next_state));
+                  } else { return true; }
+                }
+                componentWillUpdate(next_props, next_state) {
+                  if (#{type.method_defined? :component_will_update}) {
+                    this.__opalInstanceSyncSetState = false;
+                    this.__opalInstance.$component_will_update(Opal.Hash.$new(next_props), Opal.Hash.$new(next_state));
+                  }
+                }
+                componentDidUpdate(prev_props, prev_state) {
+                  if (#{type.method_defined? :component_did_update}) {
+                    this.__opalInstanceSyncSetState = false;
+                    this.__opalInstance.$component_did_update(Opal.Hash.$new(prev_props), Opal.Hash.$new(prev_state));
+                  }
+                }
+                componentWillUnmount() {
+                  if (#{type.method_defined? :component_will_unmount}) {
+                    this.__opalInstanceSyncSetState = false;
+                    this.__opalInstance.$component_will_unmount();
+                  }
+                  this.__opalInstance.__hyperstack_component_is_mounted = false;
+                }
+
+                render() {
+                  this.__opalInstanceSyncSetState = false;
+                  return this.__opalInstance.$send(render_fn).$to_n();
+                }
+              }
+            }
+            # check to see if there is an after_error callback.  If there is add a
+            # componentDidCatch handler. Because legacy behavior is to allow any object
+            # that responds to render to act as a component we have to make sure that
+            # we have a callbacks_for method.  This all becomes much easier once issue
+            # #270 is resolved.
+            if type.respond_to?(:callbacks_for) && type.callbacks_for(:after_error) != []
+              add_after_error_hook_to_native comp
+            end
+            comp
+          end
+        end
+
+        def self.create_element(type, *args, &block)
+          params = []
+
+          # Component Spec, Normal DOM, String or Native Component
+          ncc = @@component_classes[type]
+          if ncc
+            params << ncc
+          elsif type.is_a?(Class)
+            params << create_native_react_class(type)
+          elsif block_given? || Tags::HTML_TAGS.include?(type)
+            params << type
+          elsif type.is_a?(String)
+            return Hyperstack::Component::Element.new(type)
+          else
+            raise "#{type} not implemented"
+          end
+
+          # Convert Passed in properties
+          properties = convert_props(args)
+          params << properties.shallow_to_n
+
+          # Children Nodes
+          if block
+            a = [block.call].flatten
+            %x{
+              for(var i=0, l=a.length; i<l; i++) {
+                params.push(a[i].$to_n());
+              }
+            }
+          end
+          Hyperstack::Component::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
+        end
+
+        def self.clear_component_class_cache
+          @@component_classes = {}
+        end
+
+        def self.convert_props(args)
+          # merge args together into a single properties hash
+          properties = {}
+          args.each do |arg|
+            if arg.is_a? String
+              properties[arg] = true
+            elsif arg.is_a? Hash
+              arg.each do |key, value|
+                if ['class', 'className', 'class_name'].include? key
+                  next unless value
+
+                  if value.is_a?(String)
+                    value = value.split(' ')
+                  elsif !value.is_a?(Array)
+                    raise "The class param must be a string or array of strings"
+                  end
+
+                  properties['className'] = [*properties['className'], *value]
+                elsif key == 'style'
+                  next unless value
+
+                  if !value.is_a?(Hash)
+                    raise "The style param must be a Hash"
+                  end
+
+                  properties['style'] = (properties['style'] || {}).merge(value)
+                elsif Hyperstack::Component::ReactAPI::HASH_ATTRIBUTES.include?(key) && value.is_a?(Hash)
+                  properties[key] = (properties[key] || {}).merge(value)
+                else
+                  properties[key] = value
+                end
+              end
+            end
+          end
+          # process properties according to react rules
+          props = {}
+          properties.each do |key, value|
+            if ["style", "dangerously_set_inner_HTML"].include? key
+              props[lower_camelize(key)] = value.to_n
+
+            elsif key == "className"
+              props[key] = value.join(' ')
+
+            elsif key == "key"
+              props["key"] = value.to_key
+
+            elsif key == 'ref'
+              unless value.respond_to?(:call)
+                raise "The ref and dom params must be given a Proc.\n"\
+                      "If you want to capture the ref in an instance variable use the `set` method.\n"\
+                      "For example `ref: set(:TheRef)` will capture assign the ref to `@TheRef`\n"
+              end
+              props[key] = %x{
+                              function(dom_node){
+                                if (dom_node !== null && dom_node.__opalInstance !== undefined && dom_node.__opalInstance !== null) {
+                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(`dom_node.__opalInstance`) } };
+                                } else if(dom_node !== null && ReactDOM.findDOMNode !== undefined && dom_node.nodeType === undefined) {
+                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(`ReactDOM.findDOMNode(dom_node)`) } };
+                                } else if(dom_node !== null){
+                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(`dom_node`) } };
+                                }
+                              }
+                            }
+
+            elsif key == 'dom'
+              unless value.respond_to?(:call)
+                raise "The ref and dom params must be given a Proc.\n"\
+                      "If you want to capture the dom node in an instance variable use the `set` method.\n"\
+                      "For example `dom: set(:DomNode)` will assign the dom node to `@DomNode`\n"
+              end
+              unless Module.const_defined? 'Element'
+                raise "You must include 'hyperstack/component/jquery' "\
+                      "in your manifest to use the `dom` reference key.\n"\
+                      'For example if using rails include '\
+                      "`config.import 'hyperstack/component/jquery', client_only: true`"\
+                      'in your config/initializer/hyperstack.rb file'
+              end
+              props[:ref] = %x{
+                              function(dom_node){
+                                if (dom_node !== null && dom_node.__opalInstance !== undefined && dom_node.__opalInstance !== null) {
+                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(::Element[`dom_node.__opalInstance`]) } };
+                                } else if(dom_node !== null && ReactDOM.findDOMNode !== undefined && dom_node.nodeType === undefined) {
+                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(::Element[`ReactDOM.findDOMNode(dom_node)`]) } };
+                                } else if(dom_node !== null) {
+                                  #{ Hyperstack::Internal::State::Mapper.ignore_mutations { value.call(::Element[`dom_node`]) } };
+                                }
+                              }
+                            }
+
+            elsif Hyperstack::Component::ReactAPI::HASH_ATTRIBUTES.include?(key) && value.is_a?(Hash)
+              value.each { |k, v| props["#{key}-#{k.gsub(/__|_/, '__' => '_', '_' => '-')}"] = v.to_n }
+            else
+              props[Hyperstack::Component::ReactAPI.html_attr?(lower_camelize(key)) ? lower_camelize(key) : key] = value
+            end
+          end
+          props
+        end
+
+        private
+
+        def self.lower_camelize(snake_cased_word)
+          words = snake_cased_word.split('_')
+          result = [words.first]
+          result.concat(words[1..-1].map {|word| word[0].upcase + word[1..-1] }).join('')
+        end
+      end
+    end
+  end
+end

data/lib/hyperstack/internal/component/rendering_context.rb

@@ -0,0 +1,165 @@
+module Hyperstack
+  module Internal
+    module Component
+      class RenderingContext
+        class << self
+          attr_accessor :waiting_on_resources
+
+          def render(name, *args, &block)
+            was_outer_most = !@not_outer_most
+            @not_outer_most = true
+            remove_nodes_from_args(args)
+            @buffer ||= [] unless @buffer
+            if block
+              element = build do
+                saved_waiting_on_resources = waiting_on_resources
+                self.waiting_on_resources = nil
+                run_child_block(name.nil?, &block)
+                if name
+                  buffer = @buffer.dup
+                  ReactWrapper.create_element(name, *args) { buffer }.tap do |element|
+                    element.waiting_on_resources = saved_waiting_on_resources || !!buffer.detect { |e| e.waiting_on_resources if e.respond_to?(:waiting_on_resources) }
+                    element.waiting_on_resources ||= waiting_on_resources if buffer.last.is_a?(String)
+                  end
+                elsif @buffer.last.is_a? Hyperstack::Component::Element
+                  @buffer.last.tap { |element| element.waiting_on_resources ||= saved_waiting_on_resources }
+                else
+                  buffer_s = @buffer.last.to_s
+                  RenderingContext.render(:span) { buffer_s }.tap { |element| element.waiting_on_resources = saved_waiting_on_resources }
+                end
+              end
+            elsif name.is_a? Hyperstack::Component::Element
+              element = name
+            else
+              element = ReactWrapper.create_element(name, *args)
+              element.waiting_on_resources = waiting_on_resources
+            end
+            @buffer << element
+            self.waiting_on_resources = nil
+            element
+          ensure
+            @not_outer_most = @buffer = nil if was_outer_most
+          end
+
+          def build
+            current = @buffer
+            @buffer = []
+            return_val = yield @buffer
+            @buffer = current
+            return_val
+          end
+
+          def delete(element)
+            @buffer.delete(element)
+            element
+          end
+          alias as_node delete
+
+          def rendered?(element)
+            @buffer.include? element
+          end
+
+          def replace(e1, e2)
+            @buffer[@buffer.index(e1)] = e2
+          end
+
+          def remove_nodes_from_args(args)
+            args[0].each do |key, value|
+              begin
+                value.delete if value.is_a?(Hyperstack::Component::Element) # deletes Element from buffer
+              rescue Exception
+              end
+            end if args[0] && args[0].is_a?(Hash)
+          end
+
+          # run_child_block gathers the element(s) generated by a child block.
+          # for example when rendering this div: div { "hello".span; "goodby".span }
+          # two child Elements will be generated.
+          #
+          # the final value of the block should either be
+          #   1 an object that responds to :acts_as_string?
+          #   2 a string,
+          #   3 an element that is NOT yet pushed on the rendering buffer
+          #   4 or the last element pushed on the buffer
+          #
+          # in case 1 we render a span
+          # in case 2 we automatically push the string onto the buffer
+          # in case 3 we also push the Element onto the buffer IF the buffer is empty
+          # case 4 requires no special processing
+          #
+          # Once we have taken care of these special cases we do a check IF we are in an
+          # outer rendering scope.  In this case react only allows us to generate 1 Element
+          # so we insure that is the case, and also check to make sure that element in the buffer
+          # is the element returned
+
+          def run_child_block(is_outer_scope)
+            result = yield
+            if result.respond_to?(:acts_as_string?) && result.acts_as_string?
+              # hyper-mesh DummyValues respond to acts_as_string, and must
+              # be converted to spans INSIDE the parent, otherwise the waiting_on_resources
+              # flag will get set in the wrong context
+              RenderingContext.render(:span) { result.to_s }
+            elsif result.is_a?(String) || (result.is_a?(Hyperstack::Component::Element) && @buffer.empty?)
+              @buffer << result
+            end
+            raise_render_error(result) if is_outer_scope && @buffer != [result]
+          end
+
+          # heurestically raise a meaningful error based on the situation
+
+          def raise_render_error(result)
+            improper_render 'A different element was returned than was generated within the DSL.',
+                            'Possibly improper use of Element#delete.' if @buffer.count == 1
+            improper_render "Instead #{@buffer.count} elements were generated.",
+                            'Do you want to wrap your elements in a div?' if @buffer.count > 1
+            improper_render "Instead the component #{result} was returned.",
+                            "Did you mean #{result}()?" if result.try :hyper_component?
+            improper_render "Instead the #{result.class} #{result} was returned.",
+                            'You may need to convert this to a string.'
+          end
+
+          def improper_render(message, solution)
+            raise "a component's render method must generate and return exactly 1 element or a string.\n"\
+                  "    #{message}  #{solution}"
+          end
+        end
+      end
+    end
+  end
+end
+
+class Object
+  [:span, :td, :th, :while_loading].each do |tag|
+    define_method(tag) do |*args, &block|
+      args.unshift(tag)
+      # legacy hyperloop allowed tags to be lower case as well so if self is a component
+      # then this is just a DSL method for example:
+      # render(:div) do
+      #   span { 'foo' }
+      # end
+      # in this case self is just the component being rendered, so span is just a method
+      # in the component.
+      # If we fully deprecate lowercase tags, then this next line can go...
+      return send(*args, &block) if respond_to?(:hyper_component?) && hyper_component?
+      Hyperstack::Internal::Component::RenderingContext.render(*args) { to_s }
+    end
+  end
+
+
+  def para(*args, &block)
+    args.unshift(:p)
+    # see above comment
+    return send(*args, &block) if respond_to?(:hyper_component?) && hyper_component?
+    Hyperstack::Internal::Component::RenderingContext.render(*args) { to_s }
+  end
+
+  def br
+    # see above comment
+    return send(:br) if respond_to?(:hyper_component?) && hyper_component?
+    Hyperstack::Internal::Component::RenderingContext.render(:span) do
+      Hyperstack::Internal::Component::RenderingContext.render(to_s)
+      Hyperstack::Internal::Component::RenderingContext.render(:br)
+    end
+  end
+
+end