hyper-component 0.99.6 → 1.0.alpha1

data/lib/hyperstack/component/jquery.rb

@@ -0,0 +1,2 @@
+require 'opal-jquery'
+require 'hyperstack/ext/component/element'

data/lib/hyperstack/component/native_library.rb

@@ -0,0 +1,92 @@
+module Hyperstack
+  module Component
+    # NativeLibrary handles importing JS libraries. Importing native components is handled
+    # by the React::Base.  It also provides several methods used by auto-import.rb
+
+    # A NativeLibrary is simply a wrapper that holds the name of the native js library.
+    # It responds to const_missing and method_missing by looking up objects within the js library.
+    # If the object is a react component it is wrapped by a reactrb component class, otherwise
+    # a nested NativeLibrary is returned.
+
+    # Two macros are provided: imports (for naming the native library) and renames which allows
+    # the members of a library to be given different names within the ruby name space.
+
+    # Public methods used by auto-import.rb are import_const_from_native and find_and_render_component
+    class NativeLibrary
+      class << self
+        def imports(native_name)
+          @__hyperstack_component_native_prefix = "#{native_name}."
+          self
+        end
+
+        def rename(rename_list)
+          # rename_list is a hash in the form: native_name => ruby_name, native_name => ruby_name
+          rename_list.each do |js_name, ruby_name|
+            native_name = lookup_native_name(js_name)
+            if lookup_native_name(js_name)
+              create_component_wrapper(self, native_name, ruby_name) ||
+                create_library_wrapper(self, native_name, ruby_name)
+            else
+              raise "class #{name} < Hyperstack::Component::NativeLibrary could not import #{js_name}. "\
+              "Native value #{scope_native_name(js_name)} is undefined."
+            end
+          end
+        end
+
+        def import_const_from_native(klass, const_name, create_library)
+          native_name = lookup_native_name(const_name) ||
+                        lookup_native_name(const_name[0].downcase + const_name[1..-1])
+          native_name && (
+            create_component_wrapper(klass, native_name, const_name) || (
+              create_library &&
+                create_library_wrapper(klass, native_name, const_name)))
+        end
+
+        def const_missing(const_name)
+          import_const_from_native(self, const_name, true) || super
+        end
+
+        def method_missing(method, *args, &block)
+          component_class = const_get(method) if const_defined?(method, false)
+          component_class ||= import_const_from_native(self, method, false)
+          raise 'could not import a react component named: '\
+                "#{scope_native_name method}" unless component_class
+          Hyperstack::Internal::Component::RenderingContext.render(component_class, *args, &block)
+        end
+
+        private
+
+        def lookup_native_name(js_name)
+          native_name = scope_native_name(js_name)
+          `eval(#{native_name}) !== undefined && native_name`
+        # rubocop:disable Lint/RescueException  # that is what eval raises in Opal >= 0.10.
+        rescue Exception
+          nil
+          # rubocop:enable Lint/RescueException
+        end
+
+        def scope_native_name(js_name)
+          "#{@__hyperstack_component_native_prefix}#{js_name}"
+        end
+
+        def create_component_wrapper(klass, native_name, ruby_name)
+          if Hyperstack::Internal::Component::ReactWrapper.native_react_component?(native_name)
+            new_klass = klass.const_set ruby_name, Class.new(NativeLibrary).imports(native_name)
+            new_klass.class_eval do
+              include Component
+              imports native_name
+            end
+            new_klass
+          end
+        end
+
+        def create_library_wrapper(klass, native_name, ruby_name)
+          klass.const_set ruby_name, Class.new(NativeLibrary).imports(native_name)
+        end
+      end
+      # handles the case of an application NativeLibrary called...
+      # NativeLibrary !
+      imports 'NativeLibrary'
+    end
+  end
+end

data/lib/hyperstack/component/react_api.rb

@@ -0,0 +1,142 @@
+require "native"
+require 'active_support/core_ext/object/try'
+require 'hyperstack/internal/component/tags'
+
+module Hyperstack
+  module Component
+    module ReactAPI
+
+      ATTRIBUTES = %w(accept acceptCharset accessKey action allowFullScreen allowTransparency alt
+                    async autoComplete autoPlay cellPadding cellSpacing charSet checked classID
+                    className cols colSpan content contentEditable contextMenu controls coords
+                    crossOrigin data dateTime defer dir disabled download draggable encType form
+                    formAction formEncType formMethod formNoValidate formTarget frameBorder height
+                    hidden href hrefLang htmlFor httpEquiv icon id label lang list loop manifest
+                    marginHeight marginWidth max maxLength media mediaGroup method min multiple
+                    muted name noValidate open pattern placeholder poster preload radioGroup
+                    readOnly rel required role rows rowSpan sandbox scope scrolling seamless
+                    selected shape size sizes span spellCheck src srcDoc srcSet start step style
+                    tabIndex target title type useMap value width wmode dangerouslySetInnerHTML) +
+                    #SVG ATTRIBUTES
+                    %w(clipPath cx cy d dx dy fill fillOpacity fontFamily
+                    fontSize fx fy gradientTransform gradientUnits markerEnd
+                    markerMid markerStart offset opacity patternContentUnits
+                    patternUnits points preserveAspectRatio r rx ry spreadMethod
+                    stopColor stopOpacity stroke  strokeDasharray strokeLinecap
+                    strokeOpacity strokeWidth textAnchor transform version
+                    viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole
+                    xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y)
+      HASH_ATTRIBUTES = %w(data aria)
+      HTML_TAGS = Hyperstack::Internal::Component::Tags::HTML_TAGS
+
+      def self.html_tag?(name)
+        tags = HTML_TAGS
+        %x{
+          for(var i = 0; i < tags.length; i++) {
+            if(tags[i] === name)
+              return true;
+          }
+          return false;
+        }
+      end
+
+      def self.html_attr?(name)
+        attrs = ATTRIBUTES
+        %x{
+          for(var i = 0; i < attrs.length; i++) {
+            if(attrs[i] === name)
+              return true;
+          }
+          return false;
+        }
+      end
+
+      def self.create_element(type, *properties, &block)
+        Hyperstack::Internal::Component::ReactWrapper.create_element(type, *properties, &block)
+      end
+
+      # def self.render(element, container)
+      #   %x{
+      #       console.error(
+      #         "Warning: Using deprecated behavior of `Hyperstack::Component::ReactAPI.render`,",
+      #         "require \"react/top_level_render\" to get the correct behavior."
+      #       );
+      #   }
+      #   container = `container.$$class ? container[0] : container`
+      #   if !(`typeof ReactDOM === 'undefined'`)
+      #     component = Native(`ReactDOM.render(#{element.to_n}, container, function(){#{yield if block_given?}})`) # v0.15+
+      #   else
+      #     raise "render is not defined.  In React >= v15 you must import it with ReactDOM"
+      #   end
+      #
+      #   component.class.include(React::Component::API)
+      #   component
+      # end
+
+      def self.render(element, container)
+        raise "ReactDOM.render is not defined.  In React >= v15 you must import it with ReactDOM" if (`typeof ReactDOM === 'undefined'`)
+
+        container = `container.$$class ? container[0] : container`
+
+        if block_given?
+          cb = %x{
+            function(){
+              setTimeout(function(){
+                #{yield}
+              }, 0)
+            }
+          }
+          native = `ReactDOM.render(#{element.to_n}, container, cb)`
+        else
+          native = `ReactDOM.render(#{element.to_n}, container)`
+        end
+
+        return unless `#{native} !== null`
+
+        if `#{native}.__opalInstance !== undefined && #{native}.__opalInstance !== null`
+          `#{native}.__opalInstance`
+        elsif `ReactDOM.findDOMNode !== undefined && #{native}.nodeType === undefined`
+          `ReactDOM.findDOMNode(#{native})`
+        else
+          native
+        end
+      end
+
+      def self.is_valid_element(element)
+        %x{ console.error("Warning: `is_valid_element` is deprecated in favor of `is_valid_element?`."); }
+        element.kind_of?(Hyperstack::Component::Element) && `React.isValidElement(#{element.to_n})`
+      end
+
+      def self.is_valid_element?(element)
+        element.kind_of?(Hyperstack::Component::Element) && `React.isValidElement(#{element.to_n})`
+      end
+
+      def self.render_to_string(element)
+        %x{ console.error("Warning: `Hyperstack::Component::ReactAPI.render_to_string` is deprecated in favor of `React::Server.render_to_string`."); }
+        if !(`typeof ReactDOMServer === 'undefined'`)
+          Hyperstack::Internal::Component::RenderingContext.build { `ReactDOMServer.renderToString(#{element.to_n})` } # v0.15+
+        else
+          raise "renderToString is not defined.  In React >= v15 you must import it with ReactDOMServer"
+        end
+      end
+
+      def self.render_to_static_markup(element)
+        %x{ console.error("Warning: `Hyperstack::Component::ReactAPI.render_to_static_markup` is deprecated in favor of `React::Server.render_to_static_markup`."); }
+        if !(`typeof ReactDOMServer === 'undefined'`)
+          Hyperstack::Internal::Component::RenderingContext.build { `ReactDOMServer.renderToStaticMarkup(#{element.to_n})` } # v0.15+
+        else
+          raise "renderToStaticMarkup is not defined.  In React >= v15 you must import it with ReactDOMServer"
+        end
+      end
+
+      def self.unmount_component_at_node(node)
+        if !(`typeof ReactDOM === 'undefined'`)
+          `ReactDOM.unmountComponentAtNode(node.$$class ? node[0] : node)` # v0.15+
+        else
+          raise "unmountComponentAtNode is not defined.  In React >= v15 you must import it with ReactDOM"
+        end
+      end
+
+    end
+  end
+end

data/lib/hyperstack/component/server.rb

@@ -0,0 +1,21 @@
+module Hyperstack
+  module Component
+    module Server
+      def self.render_to_string(element)
+        if !(`typeof ReactDOMServer === 'undefined'`)
+          Hyperstack::Internal::Component::RenderingContext.build { `ReactDOMServer.renderToString(#{element.to_n})` } # v0.15+
+        else
+          raise "renderToString is not defined.  In React >= v15 you must import it with ReactDOMServer"
+        end
+      end
+
+      def self.render_to_static_markup(element)
+        if !(`typeof ReactDOMServer === 'undefined'`)
+          Hyperstack::Internal::Component::RenderingContext.build { `ReactDOMServer.renderToStaticMarkup(#{element.to_n})` } # v0.15+
+        else
+          raise "renderToStaticMarkup is not defined.  In React >= v15 you must import it with ReactDOMServer"
+        end
+      end
+    end
+  end
+end

data/lib/hyperstack/component/version.rb

@@ -0,0 +1,5 @@
+module Hyperstack
+  module Component
+    VERSION = '1.0.alpha1'  # '1.0.alpha1'
+  end
+end

data/lib/hyperstack/ext/component/boolean.rb

@@ -0,0 +1,14 @@
+# to_key method returns a suitable unique id that can be used as
+# a react `key`.  Other classes may override to_key as needed
+# for example hyper_mesh returns the object id of the internal
+# backing record.
+#
+# to_key is automatically called on objects passed as keys for
+# example Foo(key: my_object) results in Foo(key: my_object.to_key)
+
+# for Boolean to_key can be true or false
+class Boolean
+  def to_key
+    self
+  end
+end

data/lib/{react/ext/opal-jquery → hyperstack/ext/component}/element.rb

@@ -14,20 +14,23 @@ Element.instance_eval do
 
   define_method :render do |container = nil, params = {}, &block|
     # create an invisible component class and hang it off the DOM element
-    if `#{self.to_n}._reactrb_component_class === undefined`
-      klass = Class.new(Hyperloop::Component) do
-        # react won't rerender the components unless it sees some params
-        # changing, so we just copy them all in, but we still just reuse
-        # the render macro to define the action
-        others :all_the_params
-      end
-      `#{self.to_n}._reactrb_component_class = #{klass}`
+    if `#{to_n}._reactrb_component_class === undefined`
+      klass = Class.new
+      klass.include Hyperstack::Component
+      klass.others :all_the_params
+      `#{to_n}._reactrb_component_class = klass`
     else
-      klass = `#{self.to_n}._reactrb_component_class`
+      klass = `#{to_n}._reactrb_component_class`
     end
-    # define / redefine the render method
-    klass.render(container, params, &block)
-    React.render(React.create_element(klass, {container: container, params: params, block: block}), self)
+    klass.class_eval do
+      render(container, params, &block)
+    end
+
+    Hyperstack::Component::ReactAPI.render(
+      Hyperstack::Component::ReactAPI.create_element(
+        klass, container: container, params: params, block: block
+      ), self
+    )
   end
 
   # mount_components is useful for dynamically generated page segments for example
@@ -41,3 +44,5 @@ Element.instance_eval do
   }
   Element.expose :mount_components
 end
+
+DOM = Element

data/lib/{react/to_key.rb → hyperstack/ext/component/number.rb}

@@ -5,11 +5,6 @@
 #
 # to_key is automatically called on objects passed as keys for
 # example Foo(key: my_object) results in Foo(key: my_object.to_key)
-class Object
-  def to_key
-    object_id
-  end
-end
 
 # for Number to_key can just be the number itself
 class Number
@@ -17,10 +12,3 @@ class Number
     self
   end
 end
-
-# for Boolean to_key can be true or false
-class Boolean
-  def to_key
-    self
-  end
-end

data/lib/hyperstack/ext/component/object.rb

@@ -0,0 +1,32 @@
+class Object
+  # Lazy load HTML tag constants in the form DIV or A
+  # This is needed to allow for a tags to be used in expressions like
+  # render(DIV) do ...
+  # By lazy loading we don't unecessarily create a pile of constant element tags
+  # that will probably never get used.
+
+  class Object
+    class << self
+      alias _reactrb_tag_original_const_missing const_missing
+
+      def const_missing(const_name)
+        # Opal uses const_missing to initially define things,
+        # so we always call the original, and respond to the exception
+        _reactrb_tag_original_const_missing(const_name)
+      rescue StandardError => e
+        Hyperstack::Internal::Component::Tags.html_tag_class_for(const_name) || raise(e)
+      end
+    end
+  end
+
+  # to_key method returns a suitable unique id that can be used as
+  # a react `key`.  Other classes may override to_key as needed
+  # for example hyper_mesh returns the object id of the internal
+  # backing record.
+  #
+  # to_key is automatically called on objects passed as keys for
+  # example Foo(key: my_object) results in Foo(key: my_object.to_key)
+  def to_key
+    object_id
+  end
+end

data/lib/hyperstack/internal/component.rb

@@ -0,0 +1,16 @@
+require 'hyperstack-config'
+
+module Hyperstack
+
+  define_setting :prerendering, :off if RUBY_ENGINE != 'opal'
+
+  module Internal
+    module Component
+      class << self
+        def mounted_components
+          @__hyperstack_component_mounted_components ||= Set.new
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,212 @@
+module Hyperstack
+  module Internal
+    module Component
+      # class level methods (macros) for components
+      module ClassMethods
+
+        def deprecation_warning(message)
+          Hyperstack.deprecation_warning(self, message)
+        end
+
+        def hyper_component?
+          true
+        end
+
+        def param_accessor_style(*args)
+          props_wrapper.param_accessor_style(*args)
+        end
+
+        def backtrace(*args)
+          @__hyperstack_component_dont_catch_exceptions = (args[0] == :none)
+          @__hyperstack_component_backtrace_off = @__hyperstack_component_dont_catch_exceptions || (args[0] == :off)
+        end
+
+        def append_backtrace(message_array, backtrace)
+          message_array << "    #{backtrace[0]}"
+          backtrace[1..-1].each { |line| message_array << line }
+        end
+
+        def render(container = nil, params = {}, &block)
+          if container
+            container = container.type if container.is_a? Hyperstack::Component::Element
+            define_method :render do
+              RenderingContext.render(container, params) { instance_eval(&block) if block }
+            end
+          else
+            define_method(:render) { instance_eval(&block) }
+          end
+        end
+
+        # method missing will assume the method is a class name, and will treat this a render of
+        # of the component, i.e. Foo::Bar.baz === Foo::Bar().baz
+
+        def method_missing(name, *args, &children)
+          if args.any? || !Hyperstack::Component::Element.respond_to?(:haml_class_name)
+            super
+          # this was:
+          #   Object.method_missing(name, *args, &children) unless args.empty?
+          # Which does not show the actual component that broke.
+          # Not sure why this was like this, in tags.rb there is a similar method
+          # missing that calls Object._reactrb_import_component_class(name) which
+          # makes sure to autoimport the component.  This is not needed here, as
+          # we already have the class.
+          else
+            RenderingContext.render(
+              self, class: Hyperstack::Component::Element.haml_class_name(name), &children
+            )
+          end
+        end
+
+        def validator
+          return @__hyperstack_component_validator if @__hyperstack_component_validator
+          if superclass.respond_to?(:validator)
+            @__hyperstack_component_validator = superclass.validator.copy(props_wrapper)
+          else
+            @__hyperstack_component_validator = Validator.new(props_wrapper)
+          end
+        end
+
+        def prop_types
+          if self.validator
+            {
+              _componentValidator: %x{
+                function(props, propName, componentName) {
+                  var errors = #{validator.validate(Hash.new(`props`))};
+                  return #{`errors`.count > 0 ? `new Error(#{"In component `#{name}`\n" + `errors`.join("\n")})` : `undefined`};
+                }
+              }
+            }
+          else
+            {}
+          end
+        end
+
+        def default_props
+          validator.default_props
+        end
+
+        def params(&block)
+          validator.build(&block)
+        end
+
+        def props_wrapper
+          return @__hyperstack_component_props_wrapper if @__hyperstack_component_props_wrapper
+          if superclass.respond_to? :props_wrapper
+            @__hyperstack_component_props_wrapper = Class.new(superclass.props_wrapper)
+          else
+            @__hyperstack_component_props_wrapper ||= Class.new(PropsWrapper)
+          end
+        end
+
+        def param(*args)
+          if args[0].is_a? Hash
+            options = args[0]
+            name = options.first[0]
+            default = options.first[1]
+            options.delete(name)
+            options.merge!({default: default})
+          else
+            name = args[0]
+            options = args[1] || {}
+          end
+          if options[:type] == Proc
+            options[:default] ||= nil
+            options[:allow_nil] = true unless options.key?(:allow_nil)
+          end
+          if options[:default]
+            validator.optional(name, options)
+          else
+            validator.requires(name, options)
+          end
+        end
+
+        def collect_other_params_as(name)
+          validator.all_other_params(name) { props }
+        end
+
+        alias other_params collect_other_params_as
+        alias others collect_other_params_as
+
+        def triggers(name, opts = {})
+          aka = opts[:alias] || "#{name}!"
+          name = name =~ /^<(.+)>$/ ? name.gsub(/^<(.+)>$/, '\1') : "on_#{name}"
+          validator.event(name)
+          define_method(aka) { |*args| props[name]&.call(*args) }
+        end
+
+        def define_state(*states, &block)
+          deprecation_warning "'define_state' is deprecated. Use the 'state' macro to declare states."
+          default_initial_value = (block && block.arity == 0) ? yield : nil
+          states_hash = (states.last.is_a?(Hash)) ? states.pop : {}
+          states.each { |name| state(name => default_initial_value) } # was states_hash[name] = default_initial_value
+          states_hash.each { |name, value| state(name => value) }
+        end
+
+        def export_state(*states, &block)
+          deprecation_warning "'export_state' is deprecated. Use the 'state' macro to declare states."
+          default_initial_value = (block && block.arity == 0) ? yield : nil
+          states_hash = (states.last.is_a?(Hash)) ? states.pop : {}
+          states.each { |name| states_hash[name] = default_initial_value }
+          states_hash.each do |name, value|
+            state(name => value, scope: :class, reader: true)
+            singleton_class.define_method("#{name}!") do |*args|
+              mutate.__send__(name, *args)
+            end
+          end
+        end
+
+        def native_mixin(item)
+          native_mixins << item
+        end
+
+        def native_mixins
+          @__hyperstack_component_native_mixins ||= []
+        end
+
+        def static_call_back(name, &block)
+          static_call_backs[name] = block
+        end
+
+        def static_call_backs
+          @__hyperstack_component_static_call_backs ||= {}
+        end
+
+        def export_component(opts = {})
+          export_name = (opts[:as] || name).split('::')
+          first_name = export_name.first
+          Native(`Opal.global`)[first_name] = add_item_to_tree(
+            Native(`Opal.global`)[first_name],
+            [ReactWrapper.create_native_react_class(self)] + export_name[1..-1].reverse
+          ).to_n
+        end
+
+        def imports(component_name)
+          ReactWrapper.import_native_component(
+            self, ReactWrapper.eval_native_react_component(component_name)
+          )
+          define_method(:render) {} # define a dummy render method - will never be called...
+        rescue Exception => e # rubocop:disable Lint/RescueException : we need to catch everything!
+          raise "#{self} cannot import '#{component_name}': #{e.message}."
+          # rubocop:enable Lint/RescueException
+        ensure
+          self
+        end
+
+        def add_item_to_tree(current_tree, new_item)
+          if Native(current_tree).class != Native::Object || new_item.length == 1
+            new_item.inject { |a, e| { e => a } }
+          else
+            Native(current_tree)[new_item.last] = add_item_to_tree(
+              Native(current_tree)[new_item.last], new_item[0..-2]
+            )
+            current_tree
+          end
+        end
+
+        def to_n
+          ReactWrapper.class_eval('@@component_classes')[self]
+        end
+      end
+    end
+  end
+end