hyalite 0.0.1

data/client/hyalite/event_plugin/change_event_plugin.rb

@@ -0,0 +1,83 @@
+class Browser::DOM::Element
+  def input_type
+    `self.native.type`
+  end
+end
+
+module Hyalite
+  class ChangeEventPlugin
+    EVENT_TYPES = {
+      change: {
+        phasedRegistrationNames: {
+          bubbled: "onChange",
+          captured: "onChangeCapture"
+        },
+        dependencies: [
+          :topBlur,
+          :topChange,
+          :topClick,
+          :topFocus,
+          :topInput,
+          :topKeyDown,
+          :topKeyUp,
+          :topSelectionChange
+        ]
+      }
+    }
+
+    SUPPORTED_INPUT_TYPES = [
+      'color',
+      'date',
+      'datetime',
+      'datetime-local',
+      'email',
+      'month',
+      'number',
+      'password',
+      'range',
+      'search',
+      'tel',
+      'text',
+      'time',
+      'url',
+      'week'
+    ]
+
+    def event_types
+      EVENT_TYPES
+    end
+
+    def is_text_input_element(elem)
+      node_name = elem.node_name.downcase
+      (node_name == 'input' && SUPPORTED_INPUT_TYPES.include?(elem.input_type)) || node_name == 'textarea'
+    end
+
+    def should_use_change_event(elem)
+      node_name = elem.node_name.downcase
+      node_name == 'select' || (node_name == 'input' && elem.input_type == 'file')
+    end
+
+    def should_use_click_event(elem)
+      elem.node_name.downcase == 'input' && %w(checkbox radio).include?(elem.input_type)
+    end
+
+    def extract_event(top_level_type, top_level_target, top_level_target_id, event)
+      if should_use_change_event(top_level_target)
+        target_id = top_level_target_id if top_level_type == :topChange
+      elsif is_text_input_element(top_level_target)
+        target_id = top_level_target_id if top_level_type == :topInput
+      elsif should_use_click_event(top_level_target)
+        target_id = top_level_target_id if top_level_type == :topClick
+      end
+
+      if target_id
+        SyntheticEvent.new(event).tap do |synthetic_event|
+          InstanceHandles.traverse_two_phase(target_id) do |target_id, upwards|
+            listener = BrowserEvent.listener_at_phase(target_id, EVENT_TYPES[:change], upwards ? :bubbled : :captured)
+            synthetic_event.add_listener(listener, target_id) if listener
+          end
+        end
+      end
+    end
+  end
+end

data/client/hyalite/event_plugin/event_plugin_registry.rb

@@ -0,0 +1,49 @@
+module Hyalite
+  class EventPluginRegistry
+    def initialize(*plugins)
+      @registration_name_modules = {}
+      @registration_name_dependencies = {}
+      @plugins = []
+      plugins.each {|plugin| add_plugin(plugin) }
+    end
+
+    def add_plugin(plugin)
+      plugin.event_types.each do |key, dispatch_config|
+        dispatch_config[:phasedRegistrationNames].each do |phase, registration_name|
+          @registration_name_modules[registration_name] = plugin
+          @registration_name_dependencies[registration_name] = dispatch_config[:dependencies]
+        end
+      end
+      @plugins << plugin
+    end
+
+    def include?(registration_name)
+      @registration_name_modules.has_key? registration_name
+    end
+
+    def dependencies(registration_name)
+      @registration_name_dependencies[registration_name]
+    end
+
+    def [](registration_name)
+      @registration_name_modules[registration_name]
+    end
+
+    def extract_events(top_level_type, top_level_target, top_level_target_id, event)
+      @plugins.each.with_object([]) do |plugin, events|
+        synthetic_event = plugin.extract_event(top_level_type, top_level_target, top_level_target_id, event)
+        events << synthetic_event if synthetic_event
+      end
+    end
+
+    def registration_names
+      @registrasion_names ||= Set.new.tap do |names|
+        TOP_LEVEL_EVENTS_TO_DISPATCH_CONFIG.each_value do |value|
+          value[:phasedRegistrationNames].each_value do |name|
+            names << name
+          end
+        end
+      end
+    end
+  end
+end

data/client/hyalite/event_plugin/simple_event_plugin.rb

@@ -0,0 +1,276 @@
+module Hyalite
+  class SimpleEventPlugin
+    EVENT_TYPES = {
+      blur: {
+        phasedRegistrationNames: {
+          bubbled: :onBlur,
+          captured: :onBlurCapture
+        }
+      },
+      click: {
+        phasedRegistrationNames: {
+          bubbled: :onClick,
+          captured: :onClickCapture
+        }
+      },
+      contextMenu: {
+        phasedRegistrationNames: {
+          bubbled: :onContextMenu,
+          captured: :onContextMenuCapture
+        }
+      },
+      copy: {
+        phasedRegistrationNames: {
+          bubbled: :onCopy,
+          captured: :onCopyCapture
+        }
+      },
+      cut: {
+        phasedRegistrationNames: {
+          bubbled: :onCut,
+          captured: :onCutCapture
+        }
+      },
+      doubleClick: {
+        phasedRegistrationNames: {
+          bubbled: :onDoubleClick,
+          captured: :onDoubleClickCapture
+        }
+      },
+      drag: {
+        phasedRegistrationNames: {
+          bubbled: :onDrag,
+          captured: :onDragCapture
+        }
+      },
+      dragEnd: {
+        phasedRegistrationNames: {
+          bubbled: :onDragEnd,
+          captured: :onDragEndCapture
+        }
+      },
+      dragEnter: {
+        phasedRegistrationNames: {
+          bubbled: :onDragEnter,
+          captured: :onDragEnterCapture
+        }
+      },
+      dragExit: {
+        phasedRegistrationNames: {
+          bubbled: :onDragExit,
+          captured: :onDragExitCapture
+        }
+      },
+      dragLeave: {
+        phasedRegistrationNames: {
+          bubbled: :onDragLeave,
+          captured: :onDragLeaveCapture
+        }
+      },
+      dragOver: {
+        phasedRegistrationNames: {
+          bubbled: :onDragOver,
+          captured: :onDragOverCapture
+        }
+      },
+      dragStart: {
+        phasedRegistrationNames: {
+          bubbled: :onDragStart,
+          captured: :onDragStartCapture
+        }
+      },
+      drop: {
+        phasedRegistrationNames: {
+          bubbled: :onDrop,
+          captured: :onDropCapture
+        }
+      },
+      focus: {
+        phasedRegistrationNames: {
+          bubbled: :onFocus,
+          captured: :onFocusCapture
+        }
+      },
+      input: {
+        phasedRegistrationNames: {
+          bubbled: :onInput,
+          captured: :onInputCapture
+        }
+      },
+      keyDown: {
+        phasedRegistrationNames: {
+          bubbled: :onKeyDown,
+          captured: :onKeyDownCapture
+        }
+      },
+      keyPress: {
+        phasedRegistrationNames: {
+          bubbled: :onKeyPress,
+          captured: :onKeyPressCapture
+        }
+      },
+      keyUp: {
+        phasedRegistrationNames: {
+          bubbled: :onKeyUp,
+          captured: :onKeyUpCapture
+        }
+      },
+      load: {
+        phasedRegistrationNames: {
+          bubbled: :onLoad,
+          captured: :onLoadCapture
+        }
+      },
+      error: {
+        phasedRegistrationNames: {
+          bubbled: :onError,
+          captured: :onErrorCapture
+        }
+      },
+      mouseDown: {
+        phasedRegistrationNames: {
+          bubbled: :onMouseDown,
+          captured: :onMouseDownCapture
+        }
+      },
+      mouseMove: {
+        phasedRegistrationNames: {
+          bubbled: :onMouseMove,
+          captured: :onMouseMoveCapture
+        }
+      },
+      mouseOut: {
+        phasedRegistrationNames: {
+          bubbled: :onMouseOut,
+          captured: :onMouseOutCapture
+        }
+      },
+      mouseOver: {
+        phasedRegistrationNames: {
+          bubbled: :onMouseOver,
+          captured: :onMouseOverCapture
+        }
+      },
+      mouseUp: {
+        phasedRegistrationNames: {
+          bubbled: :onMouseUp,
+          captured: :onMouseUpCapture
+        }
+      },
+      paste: {
+        phasedRegistrationNames: {
+          bubbled: :onPaste,
+          captured: :onPasteCapture
+        }
+      },
+      reset: {
+        phasedRegistrationNames: {
+          bubbled: :onReset,
+          captured: :onResetCapture
+        }
+      },
+      scroll: {
+        phasedRegistrationNames: {
+          bubbled: :onScroll,
+          captured: :onScrollCapture
+        }
+      },
+      submit: {
+        phasedRegistrationNames: {
+          bubbled: :onSubmit,
+          captured: :onSubmitCapture
+        }
+      },
+      touchCancel: {
+        phasedRegistrationNames: {
+          bubbled: :onTouchCancel,
+          captured: :onTouchCancelCapture
+        }
+      },
+      touchEnd: {
+        phasedRegistrationNames: {
+          bubbled: :onTouchEnd,
+          captured: :onTouchEndCapture
+        }
+      },
+      touchMove: {
+        phasedRegistrationNames: {
+          bubbled: :onTouchMove,
+          captured: :onTouchMoveCapture
+        }
+      },
+      touchStart: {
+        phasedRegistrationNames: {
+          bubbled: :onTouchStart,
+          captured: :onTouchStartCapture
+        }
+      },
+      wheel: {
+        phasedRegistrationNames: {
+          bubbled: :onWheel,
+          captured: :onWheelCapture
+        }
+      }
+    }
+
+    TOP_LEVEL_EVENTS_TO_DISPATCH_CONFIG = {
+      topBlur: EVENT_TYPES[:blur],
+      topClick: EVENT_TYPES[:click],
+      topContextMenu: EVENT_TYPES[:contextMenu],
+      topCopy: EVENT_TYPES[:copy],
+      topCut: EVENT_TYPES[:cut],
+      topDoubleClick: EVENT_TYPES[:doubleClick],
+      topDrag: EVENT_TYPES[:drag],
+      topDragEnd: EVENT_TYPES[:dragEnd],
+      topDragEnter: EVENT_TYPES[:dragEnter],
+      topDragExit: EVENT_TYPES[:dragExit],
+      topDragLeave: EVENT_TYPES[:dragLeave],
+      topDragOver: EVENT_TYPES[:dragOver],
+      topDragStart: EVENT_TYPES[:dragStart],
+      topDrop: EVENT_TYPES[:drop],
+      topError: EVENT_TYPES[:error],
+      topFocus: EVENT_TYPES[:focus],
+      topInput: EVENT_TYPES[:input],
+      topKeyDown: EVENT_TYPES[:keyDown],
+      topKeyPress: EVENT_TYPES[:keyPress],
+      topKeyUp: EVENT_TYPES[:keyUp],
+      topLoad: EVENT_TYPES[:load],
+      topMouseDown: EVENT_TYPES[:mouseDown],
+      topMouseMove: EVENT_TYPES[:mouseMove],
+      topMouseOut: EVENT_TYPES[:mouseOut],
+      topMouseOver: EVENT_TYPES[:mouseOver],
+      topMouseUp: EVENT_TYPES[:mouseUp],
+      topPaste: EVENT_TYPES[:paste],
+      topReset: EVENT_TYPES[:reset],
+      topScroll: EVENT_TYPES[:scroll],
+      topSubmit: EVENT_TYPES[:submit],
+      topTouchCancel: EVENT_TYPES[:touchCancel],
+      topTouchEnd: EVENT_TYPES[:touchEnd],
+      topTouchMove: EVENT_TYPES[:touchMove],
+      topTouchStart: EVENT_TYPES[:touchStart],
+      topWheel: EVENT_TYPES[:wheel]
+    }
+
+    def initialize
+      TOP_LEVEL_EVENTS_TO_DISPATCH_CONFIG.each do |type, dispatch_config|
+        dispatch_config[:dependencies] = [type]
+      end
+    end
+
+    def event_types
+      EVENT_TYPES
+    end
+
+    def extract_event(top_level_type, top_level_target, top_level_target_id, event)
+      dispatch_config = TOP_LEVEL_EVENTS_TO_DISPATCH_CONFIG[top_level_type]
+      return [] unless dispatch_config
+
+      SyntheticEvent.new(event).tap do |synthetic_event|
+        InstanceHandles.traverse_two_phase(top_level_target_id) do |target_id, upwards|
+          listener = BrowserEvent.listener_at_phase(target_id, dispatch_config, upwards ? :bubbled : :captured)
+          synthetic_event.add_listener(listener, target_id) if listener
+        end
+      end
+    end
+  end
+end

data/client/hyalite/input_wrapper.rb

@@ -0,0 +1,94 @@
+require 'json'
+require 'hyalite/linked_value_utils'
+require 'hyalite/dom_operations'
+
+module Hyalite
+  class InputWrapper
+    include LinkedValueUtils
+
+    def initialize(dom_component)
+      @dom_component = dom_component
+    end
+
+    def mount_wrapper
+      props = @dom_component.current_element.props
+      @wrapper_state = {
+        initialChecked: props[:default_checked] || false,
+        initialValue: props[:default_value],
+        listeners: nil,
+        onChange: -> (event) { handle_change(event) }
+      }
+    end
+
+    def unmount_wrapper
+    end
+
+    def native_props(inst)
+      props = @dom_component.current_element.props
+
+      props.merge({
+        defaultChecked: nil,
+        defaultValue: nil,
+        value: props[:value] || @wrapper_state[:initialValue],
+        checked: props[:checked] || @wrapper_state[:initialChecked],
+        onChange: @wrapper_state[:onChange],
+      })
+    end
+
+    def force_update_if_mounted(instance)
+      if instance.root_node_id
+        update_wrapper
+      end
+    end
+
+    def update_wrapper
+      props = @dom_component.current_element.props
+      if props.has_key?(:checked)
+        checked = props[:checked]
+        node = Mount.node(@dom_component.root_node_id)
+        if checked
+          node[:checked] = checked
+        else
+          node.remove_attribute(:checked)
+        end
+      end
+
+      value = LinkedValueUtils.value(props)
+      if value
+        DOMOperations.update_property_by_id(
+          @dom_component.root_node_id,
+          'value',
+          value.to_s
+        )
+      end
+    end
+
+    def handle_change(event)
+      props = @dom_component.current_element.props
+      return_value = execute_on_change(props, event)
+
+      Hyalite.updates.asap { force_update_if_mounted(@dom_component) }
+
+      if props[:type] == 'radio' && props[:name]
+        root_node = Mount.node(root_node_id)
+        query_root = root_node
+
+        while query_root.parent
+          query_root = query_root.parent
+        end
+
+        group = query_root =~ "input[name='#{name.to_json}'][type='radio']"
+
+        group.each do |other_node|
+          next if other_node == root_node || other_node.form != root_node.form
+
+          other_id = Mount.node_id(other_node)
+          other_instance = Mount.instances_by_root_id(other_id)
+          Hyalite.updates.asap { force_update_if_mounted(other_instance) }
+        end
+      end
+
+      return_value
+    end
+  end
+end