hyper-component 0.99.6 → 1.0.alpha1

data/lib/hyperstack/component/auto-import.rb

@@ -0,0 +1,44 @@
+# rubocop:disable Style/FileName
+# require 'reactrb/auto-import' to automatically
+# import JS libraries and components when they are detected
+if RUBY_ENGINE == 'opal'
+  # modifies const and method_missing so that they will attempt
+  # to auto import native libraries and components using Hyperstack::Component::NativeLibrary
+  class Object
+    class << self
+      alias _reactrb_original_const_missing const_missing
+      alias _reactrb_original_method_missing method_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_original_const_missing(const_name)
+      rescue StandardError => e
+        Hyperstack::Internal::Component::NativeLibrary.import_const_from_native(Object, const_name, true) || raise(e)
+      end
+
+      def _reactrb_import_component_class(method)
+        Hyperstack::Internal::Component::NativeLibrary.import_const_from_native(self, method, false)
+      end
+
+      def method_missing(method, *args, &block)
+        component_class = _reactrb_import_component_class(method)
+        _reactrb_original_method_missing(method, *args, &block) unless component_class
+        Hyperstack::Internal::Component::RenderingContext.render(component_class, *args, &block)
+      end
+    end
+  end
+
+  # The public NativeLibrary can't be used directly to
+  # import_const_from_native, because it is set to import from
+  # `window.NativeLibrary`.  So we set up an internal class that won't
+  #  have any prefix defined.
+  module Hyperstack
+    module Internal
+      module Component
+        class NativeLibrary < Hyperstack::Component::NativeLibrary
+        end
+      end
+    end
+  end
+end

data/lib/hyperstack/component/children.rb

@@ -0,0 +1,40 @@
+module Hyperstack
+  module Component
+    class Children
+      include Enumerable
+
+      def initialize(children)
+        @children = children
+      end
+
+      def render
+        each(&:render)
+      end
+
+      def to_proc
+        -> () { render }
+      end
+
+      def each(&block)
+        return to_enum(__callee__) { length } unless block_given?
+        return [] unless length > 0
+        collection = []
+        %x{
+          React.Children.forEach(#{@children}, function(context){
+            #{
+              element = Element.new(`context`)
+              block.call(element)
+              collection << element
+            }
+          })
+        }
+        collection
+      end
+
+      def length
+        @length ||= `React.Children.count(#{@children})`
+      end
+      alias_method :size, :length
+    end
+  end
+end

data/lib/hyperstack/component/element.rb

@@ -0,0 +1,129 @@
+require 'hyperstack/ext/component/string'
+
+module Hyperstack
+  module Component
+    #
+    # Wraps the React Native element class
+    #
+    # adds the #on method to add event handlers to the element
+    #
+    # adds the #render method to place elements in the DOM and
+    # #delete (alias/deprecated #as_node) method to remove elements from the DOM
+    #
+    # handles the haml style class notation so that
+    #  div.bar.blat becomes div(class: "bar blat")
+    # by using method missing
+    #
+    class Element
+      include Native
+
+      alias_native :element_type, :type
+      alias_native :props, :props
+
+      attr_reader :type
+      attr_reader :properties
+      attr_reader :block
+
+      attr_accessor :waiting_on_resources
+
+      def initialize(native_element, type = nil, properties = {}, block = nil)
+        @type = type
+        @properties = (`typeof #{properties} === 'undefined'` ? nil : properties) || {}
+        @block = block
+        @native = native_element
+      end
+
+      # Attach event handlers.
+
+      def on(*event_names, &block)
+        event_names.each { |event_name| merge_event_prop!(event_name, &block) }
+        @native = `React.cloneElement(#{@native}, #{@properties.shallow_to_n})`
+        self
+      end
+
+      # Render element into DOM in the current rendering context.
+      # Used for elements that are not yet in DOM, i.e. they are provided as children
+      # or they have been explicitly removed from the rendering context using the delete method.
+
+      def render(props = {}, &new_block)
+        if props.empty?
+          Hyperstack::Internal::Component::RenderingContext.render(self)
+        else
+          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(props)
+          Hyperstack::Internal::Component::RenderingContext.render(
+            Element.new(`React.cloneElement(#{@native}, #{props.shallow_to_n})`,
+                        type, @properties.merge(props), block)
+          )
+        end
+      end
+
+      # Delete (remove) element from rendering context, the element may later be added back in
+      # using the render method.
+
+      def delete
+        Hyperstack::Internal::Component::RenderingContext.delete(self)
+      end
+      # Deprecated version of delete method
+      alias as_node delete
+
+      private
+
+      # built in events, events going to native components, and events going to reactrb
+
+      # built in events will have their event param translated to the Event wrapper
+      # and the name will camelcased and have on prefixed, so :click becomes onClick.
+      #
+      # events emitting from native components are assumed to have the same camel case and
+      # on prefixed.
+      #
+      # events emitting from reactrb components will just have on_ prefixed.  So
+      # :play_button_pushed attaches to the :on_play_button_pushed param
+      #
+      # in all cases the default name convention can be overriden by wrapping in <...> brackets.
+      # So on("<MyEvent>") will attach to the "MyEvent" param.
+
+      def merge_event_prop!(event_name, &block)
+        if event_name =~ /^<(.+)>$/
+          merge_component_event_prop! event_name.gsub(/^<(.+)>$/, '\1'), &block
+        elsif Event::BUILT_IN_EVENTS.include?(name = "on#{event_name.event_camelize}")
+          merge_built_in_event_prop! name, &block
+        elsif event_name == :enter
+          merge_built_in_event_prop!('onKeyDown') { |evt| yield(evt) if evt.key_code == 13 }
+        elsif @type.instance_variable_get('@native_import')
+          merge_component_event_prop! name, &block
+        else
+          merge_component_event_prop! "on_#{event_name}", &block
+        end
+      end
+
+      def merge_built_in_event_prop!(prop_name)
+        @properties.merge!(
+          prop_name => %x{
+            function(){
+              var react_event = arguments[0];
+              var all_args;
+              var other_args;
+              if (arguments.length > 1) {
+                all_args = Array.prototype.slice.call(arguments);
+                other_args = all_args.slice(1, arguments.length);
+                return #{yield(Event.new(`react_event`), *(`other_args`))};
+              } else {
+                return #{yield(Event.new(`react_event`))};
+              }
+            }
+          }
+        )
+      end
+
+      def merge_component_event_prop!(prop_name)
+        @properties.merge!(
+          prop_name => %x{
+            function(){
+              return #{yield(*Array(`arguments`))}
+            }
+          }
+        )
+      end
+    end
+  end
+end

data/lib/hyperstack/component/event.rb

@@ -0,0 +1,78 @@
+module Hyperstack
+  module Component
+    class Event
+      include Native
+      alias_native :bubbles, :bubbles
+      alias_native :cancelable, :cancelable
+      alias_native :current_target, :currentTarget
+      alias_native :default_prevented, :defaultPrevented
+      alias_native :event_phase, :eventPhase
+      alias_native :is_trusted?, :isTrusted
+      alias_native :native_event, :nativeEvent
+      alias_native :target, :target
+      alias_native :timestamp, :timeStamp
+      alias_native :event_type, :type
+      alias_native :prevent_default, :preventDefault
+      alias_native :stop_propagation, :stopPropagation
+      # Clipboard
+      alias_native :clipboard_data, :clipboardData
+      # Keyboard
+      alias_native :alt_key, :altKey
+      alias_native :char_code, :charCode
+      alias_native :ctrl_key, :ctrlKey
+      alias_native :get_modifier_state, :getModifierState
+      alias_native :key, :key
+      alias_native :key_code, :keyCode
+      alias_native :locale, :locale
+      alias_native :location, :location
+      alias_native :meta_key, :metaKey
+      alias_native :repeat, :repeat
+      alias_native :shift_key, :shiftKey
+      alias_native :which, :which
+      # Focus
+      alias_native :related_target, :relatedTarget
+      # Mouse
+      # aliased above: alias_native :alt_key, :altKey
+      alias_native :button, :button
+      alias_native :buttons, :buttons
+      alias_native :client_x, :clientX
+      alias_native :client_y, :clientY
+      # aliased above: alias_native :ctrl_key, :ctrlKey
+      alias_native :get_modifier_state, :getModifierState
+      # aliased above: alias_native :meta_key, :metaKey
+      alias_native :page_x, :pageX
+      alias_native :page_y, :pageY
+      # aliased above: alias_native :related_target, :relatedTarget
+      alias_native :screen_x, :screen_x
+      alias_native :screen_y, :screen_y
+      # aliased above: alias_native :shift_key, :shift_key
+      # Touch
+      # aliased above: alias_native :alt_key, :altKey
+      alias_native :changed_touches, :changedTouches
+      # aliased above: alias_native :ctrl_key, :ctrlKey
+      # aliased above: alias_native :get_modifier_state, :getModifierState
+      # aliased above: alias_native :meta_key, :metaKey
+      # aliased above: alias_native :shift_key, :shiftKey
+      alias_native :target_touches, :targetTouches
+      alias_native :touches, :touches
+      # UI
+      alias_native :detail, :detail
+      alias_native :view, :view
+      # Wheel
+      alias_native :delta_mode, :deltaMode
+      alias_native :delta_x, :deltaX
+      alias_native :delta_y, :deltaY
+      alias_native :delta_z, :deltaZ
+
+      BUILT_IN_EVENTS = %w{onCopy onCut onPaste onKeyDown onKeyPress onKeyUp
+        onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick onDrag
+        onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop
+        onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver
+        onMouseUp onSelect onTouchCancel onTouchEnd onTouchMove onTouchStart onScroll onWheel}
+
+      def initialize(native_event)
+        @native = native_event
+      end
+    end
+  end
+end

data/lib/hyperstack/component/haml.rb

@@ -0,0 +1,18 @@
+require 'hyperstack/internal/component/haml'
+# to allow for easier testing we include the internal mixins
+# from hyperstack/internal/component/haml
+# see spec/deprecated_features/haml_spec
+module Hyperstack
+  module Internal
+    module Component
+      module Tags
+        include HAMLTagInstanceMethods
+      end
+    end
+  end
+  module Component
+    class Element
+      include HAMLElementInstanceMethods
+    end
+  end
+end

data/lib/hyperstack/component/isomorphic_helpers.rb

@@ -0,0 +1,235 @@
+require "hyperstack/internal/component"
+
+module Hyperstack
+  module Component
+    module IsomorphicHelpers
+      def self.included(base)
+        base.extend(ClassMethods)
+      end
+
+      if RUBY_ENGINE != 'opal'
+        def self.load_context(ctx, controller, name = nil)
+          @context = Context.new("#{controller.object_id}-#{Time.now.to_i}", ctx, controller, name)
+          @context.load_opal_context
+          ::Rails.logger.debug "************************** React Server Context Initialized #{name} #{Time.now.to_f} *********************************************"
+          @context
+        end
+      else
+        def self.load_context(unique_id = nil, name = nil)
+          # can be called on the client to force re-initialization for testing purposes
+          if !unique_id || !@context || @context.unique_id != unique_id
+            if on_opal_server?
+              `console.history = []` rescue nil
+              message = "************************ React Prerendering Context Initialized #{name} ***********************"
+            else
+              message = "************************ React Browser Context Initialized ****************************"
+            end
+            log(message)
+            @context = Context.new(unique_id)
+          end
+          @context
+        end
+      end
+
+      def self.context
+        @context
+      end
+
+      def self.log(message, message_type = :info)
+        message = [message] unless message.is_a? Array
+
+        if (message_type == :info || message_type == :warning) && Hyperstack.env.production?
+          return
+        end
+
+        if message_type == :info
+          if on_opal_server?
+            style = 'background: #00FFFF; color: red'
+          else
+            style = 'background: #222; color: #bada55'
+          end
+          message = ["%c" + message[0], style]+message[1..-1]
+          `console.log.apply(console, message)`
+        elsif message_type == :warning
+          `console.warn.apply(console, message)`
+        else
+          `console.error.apply(console, message)`
+        end
+      end
+
+      if RUBY_ENGINE != 'opal'
+        def self.on_opal_server?
+          false
+        end
+
+        def self.on_opal_client?
+          false
+        end
+      else
+        def self.on_opal_server?
+          `typeof Opal.global.document === 'undefined'`
+        end
+
+        def self.on_opal_client?
+          !on_opal_server?
+        end
+      end
+
+      def log(*args)
+        IsomorphicHelpers.log(*args)
+      end
+
+      def on_opal_server?
+        self.class.on_opal_server?
+      end
+
+      def on_opal_client?
+        self.class.on_opal_client?
+      end
+
+      def self.prerender_footers(controller = nil)
+        footer = Context.prerender_footer_blocks.collect { |block| block.call controller }.join("\n")
+        if RUBY_ENGINE != 'opal'
+          footer = (footer + @context.send_to_opal(:prerender_footers).to_s) if @context
+          footer = footer.html_safe
+        end
+        footer
+      end
+
+      class Context
+        attr_reader :controller
+        attr_reader :unique_id
+
+        def self.define_isomorphic_method(method_name, &block)
+          @@ctx_methods ||= {}
+          @@ctx_methods[method_name] = block
+        end
+
+        def self.before_first_mount_blocks
+          @before_first_mount_blocks ||= []
+        end
+
+        def self.prerender_footer_blocks
+          @prerender_footer_blocks ||= []
+        end
+
+        def initialize(unique_id, ctx = nil, controller = nil, cname = nil)
+          @unique_id = unique_id
+          @cname = cname
+          if RUBY_ENGINE != 'opal'
+            @controller = controller
+            @ctx = ctx
+            if defined? @@ctx_methods
+              @@ctx_methods.each do |method_name, block|
+                @ctx.attach("ServerSideIsomorphicMethod.#{method_name}", proc{|args| block.call(args.to_json)})
+              end
+            end
+          end
+          Hyperstack::Application::Boot.run(context: self)
+          self.class.before_first_mount_blocks.each { |block| block.call(self) }
+        end
+
+        def load_opal_context
+          send_to_opal(:load_context, @unique_id, @cname)
+        end
+
+        def eval(js)
+          @ctx.eval(js) if @ctx
+        end
+
+        def send_to_opal(method_name, *args)
+          return unless @ctx
+          args = [1] if args.length == 0
+          Hyperstack::Internal::Component::Rails::ComponentLoader.new(@ctx).load!
+          method_args = args.collect do |arg|
+            quarg = "#{arg}".tr('"', "'")
+            "\"#{quarg}\""
+          end.join(', ')
+          @ctx.eval("Opal.Hyperstack.$const_get('Component').$const_get('IsomorphicHelpers').$#{method_name}(#{method_args})")
+        end
+
+        def self.register_before_first_mount_block(&block)
+          before_first_mount_blocks << block
+        end
+
+        def self.register_prerender_footer_block(&block)
+          prerender_footer_blocks << block
+        end
+      end
+
+      class IsomorphicProcCall
+
+        attr_reader :context
+
+        def result
+          @result.first if @result
+        end
+
+        def initialize(name, block, context, *args)
+          @name = name
+          @context = context
+          block.call(self, *args)
+          @result ||= send_to_server(*args)
+        end
+
+        def when_on_client(&block)
+          @result = [block.call] if IsomorphicHelpers.on_opal_client?
+        end
+
+        def send_to_server(*args)
+          if IsomorphicHelpers.on_opal_server?
+            method_string = "ServerSideIsomorphicMethod." + @name + "(" + args.to_json + ")"
+            @result = [JSON.parse(`eval(method_string)`)]
+          end
+        end
+
+        def when_on_server(&block)
+          @result = [block.call.to_json] unless IsomorphicHelpers.on_opal_client? || IsomorphicHelpers.on_opal_server?
+        end
+      end
+
+      module ClassMethods
+        def on_opal_server?
+          IsomorphicHelpers.on_opal_server?
+        end
+
+        def on_opal_client?
+          IsomorphicHelpers.on_opal_client?
+        end
+
+        def log(*args)
+          IsomorphicHelpers.log(*args)
+        end
+
+        def controller
+          IsomorphicHelpers.context.controller
+        end
+
+        def before_first_mount(&block)
+          IsomorphicHelpers::Context.register_before_first_mount_block(&block)
+        end
+
+        def prerender_footer(&block)
+          IsomorphicHelpers::Context.register_prerender_footer_block(&block)
+        end
+
+        if RUBY_ENGINE != 'opal'
+          def isomorphic_method(name, &block)
+            IsomorphicHelpers::Context.send(:define_isomorphic_method, name) do |args_as_json|
+              IsomorphicHelpers::IsomorphicProcCall.new(name, block, self, *JSON.parse(args_as_json)).result
+            end
+          end
+        else
+          require 'json'
+
+          def isomorphic_method(name, &block)
+            self.class.send(:define_method, name) do | *args |
+              IsomorphicHelpers::IsomorphicProcCall.new(name, block, self, *args).result
+            end
+          end
+        end
+
+      end
+    end
+  end
+end