hyalite 0.0.1

data/client/hyalite/component.rb

@@ -0,0 +1,77 @@
+require 'hyalite/short_hand'
+
+module Hyalite
+  module Component
+
+    attr_accessor :props, :state, :context, :refs
+
+    def init_component(props, context, updator)
+      @props = props
+      @context = context
+      @updator = updator
+      @state = initial_state
+      @refs = nil
+    end
+
+    def initial_state
+      {}
+    end
+
+    def context_types
+      {}
+    end
+
+    def child_context
+      {}
+    end
+
+    def component_did_mount
+    end
+
+    def component_will_mount
+    end
+
+    def component_will_unmount
+    end
+
+    def component_will_update(props, state, context)
+    end
+
+    def component_did_update(props, state, context)
+    end
+
+    def should_component_update(props, state, context)
+      true
+    end
+
+    def set_state(states, &block)
+      @updator.enqueue_set_state(self, states)
+      if block_given?
+        @updator.enqueue_callback(self, &block)
+      end
+    end
+
+    def render
+    end
+  end
+
+  class EmptyComponent
+    include Component
+
+    def self.empty_element
+      @instance ||= ElementObject.new(EmptyComponent, nil, nil, nil, nil)
+    end
+
+    def render
+      Hyalite.create_element("noscript", nil, nil)
+    end
+  end
+
+  class TopLevelWrapper
+    include Component
+
+    def render
+      @props
+    end
+  end
+end

data/client/hyalite/composite_component.rb

@@ -0,0 +1,237 @@
+require 'hyalite/update_queue'
+require 'hyalite/reconciler'
+require 'hyalite/internal_component'
+
+module Hyalite
+  class CompositeComponent
+    include InternalComponent
+
+    attr_reader :current_element, :rendered_component
+    attr_accessor :top_level_wrapper, :pending_state_queue, :mount_order, :pending_callbacks, :pending_element
+
+    @next_mount_id = 1
+
+    def self.next_mount_id
+      @next_mount_id += 1
+    end
+
+    def initialize(element)
+      @element = element
+      @current_element = @element
+    end
+
+    def mount_component(root_id, mount_ready, context)
+      @context = context
+      @mount_order = CompositeComponent.next_mount_id
+      @root_node_id = root_id
+
+      public_context = mask_context(@context)
+      @instance = @current_element.type.new
+      @instance.init_component(@current_element.props, public_context, UpdateQueue)
+
+      Hyalite.instance_map[@instance] = self
+
+      @pending_state_queue = nil
+      @pending_replace_state = false
+      @pending_force_update = false
+
+      @instance.component_will_mount
+      if @pending_state_queue
+        @instance.state = process_pending_state(@instance.props, @instance.context)
+      end
+
+      @rendered_component = Hyalite.instantiate_component(render_component(@instance))
+
+      markup = Reconciler.mount_component(
+        @rendered_component,
+        root_id,
+        mount_ready,
+        context.merge(@instance.child_context)
+      )
+
+      mount_ready.enqueue { @instance.component_did_mount }
+
+      markup
+    end
+
+    def unmount_component
+
+      @instance.component_will_unmount
+
+      Reconciler.unmount_component(@rendered_component)
+      @rendered_component = nil
+      @instance = nil
+
+      @pending_state_queue = nil
+      @pending_replace_state = false
+      @pending_force_update = false
+      @pending_callbacks = nil
+      @pending_element = nil
+
+      @context = nil
+      @root_node_id = nil
+      @top_level_wrapper = nil
+
+      Hyalite.instance_map.delete(@instance)
+    end
+
+    def perform_update_if_necessary(mount_ready)
+      if @pending_element
+        receive_component(@pending_element, mount_ready, @context)
+      end
+
+      if (@pending_state_queue && @pending_state_queue.any?) || @pending_force_update
+        update_component(
+          mount_ready,
+          @current_element,
+          @current_element,
+          @context,
+          @context)
+      end
+    end
+
+    def public_instance
+      @instance
+    end
+
+    def inspect
+      "CompositeComponent: instance: #{@instance.inspect}"
+    end
+
+    def attach_ref(ref, component)
+      @instance.refs ||= {}
+      @instance.refs[ref] = component.public_instance
+    end
+
+    private
+
+    def render_component(instance)
+      Hyalite.current_owner(self) do
+        instance.render
+      end
+    end
+
+    def mask_context(context)
+      context.select {|k, v| @current_element.type.context_types.has_key? k }
+    end
+
+    def update_component(mount_ready, prev_parent_element, next_parent_element, prev_unmasked_context, next_unmasked_context)
+      next_context = (@context == next_unmasked_context ? @instance.context : mask_context(next_unmasked_context))
+
+      next_props = next_parent_element.props
+      next_state = process_pending_state(next_props, next_context)
+
+      should_update =
+        @pending_force_update ||
+        @instance.should_component_update(next_props, next_state, next_context)
+
+      if should_update
+        @pending_force_update = false
+        perform_component_update(
+          next_parent_element,
+          next_props,
+          next_state,
+          next_context,
+          mount_ready,
+          next_unmasked_context
+        )
+      else
+        @current_element = next_parent_element
+        @context = next_unmasked_context
+        @instance.props = next_props
+        @instance.state = next_state
+        @instance.context = next_context
+      end
+    end
+
+    def receive_component(next_element, mount_ready, next_context)
+      prev_element = @current_element
+      prev_context = @context
+
+      @pending_element = nil
+
+      update_component(
+        mount_ready,
+        prev_element,
+        next_element,
+        prev_context,
+        next_context
+      )
+    end
+
+    def perform_component_update(next_element, next_props, next_state, next_context, mount_ready, unmasked_context)
+      prev_props = @instance.props
+      prev_state = @instance.state
+      prev_context = @instance.context
+
+      @instance.component_will_update(next_props, next_state, next_context)
+
+      @current_element = next_element
+      @context = unmasked_context
+      @instance.props = next_props
+      @instance.state = next_state
+      @instance.context = next_context
+
+      update_rendered_component(mount_ready, unmasked_context)
+
+      mount_ready.enqueue do
+        @instance.component_did_update(prev_props, prev_state, prev_context)
+      end
+    end
+
+    def update_rendered_component(mount_ready, context)
+      prev_component_instance = @rendered_component
+      prev_rendered_element = prev_component_instance.current_element
+      next_rendered_element = render_validated_component
+      if Reconciler.should_update_component(prev_rendered_element, next_rendered_element)
+        Reconciler.receive_component(
+          prev_component_instance,
+          next_rendered_element,
+          mount_ready,
+          context
+        )
+      else
+        this_id = @root_node_id
+        prev_component_id = prev_component_instance.root_node_id
+        Reconciler.unmount_component(prev_component_instance)
+
+        @rendered_component = Hyalite.instantiate_component(next_rendered_element)
+        next_markup = Reconciler.mount_component(
+          @rendered_component,
+          this_id,
+          mount_ready,
+          context
+        )
+        replace_node_with_markup_by_id(prev_component_id, next_markup)
+      end
+    end
+
+
+    def replace_node_with_markup_by_id(id, markup)
+      node = Mount.node(id)
+      node.replace(markup)
+    end
+
+    def render_validated_component
+      Hyalite.current_owner(self) do
+        @instance.render
+      end
+    end
+
+    def process_pending_state(props, context)
+      replace = @pending_replace_state
+      @pending_replace_state = false
+
+      return @instance.state unless @pending_state_queue
+
+      queue = @pending_state_queue
+      @pending_state_queue = nil
+
+
+      queue.each_with_object(replace ? {} : @instance.state) do |partial, next_state|
+        next_state.merge! (partial.is_a?(Proc) ? partial.call(@instance, next_state, props, context) : partial)
+      end
+    end
+
+  end
+end

data/client/hyalite/dom_component.rb

@@ -0,0 +1,329 @@
+require 'hyalite/multi_children'
+require 'hyalite/dom_property_operations'
+require 'hyalite/internal_component'
+require 'hyalite/browser_event'
+require 'hyalite/input_wrapper'
+
+module Hyalite
+  class DOMComponent
+    include MultiChildren
+    include InternalComponent
+
+    attr_reader :root_node_id
+
+    def initialize(element)
+      @element = element
+      @tag = @element.type.downcase
+      @input_wrapper = InputWrapper.new(self)
+    end
+
+    def current_element
+      @element
+    end
+
+    def mount_component(root_id, mount_ready, context)
+      return if @tag == "noscript"
+      @root_node_id = root_id
+
+      props = current_element.props
+
+      case @tag
+      # when 'iframe', 'img', 'form', 'video', 'audio'
+      #   this._wrapperState = {
+      #     listeners: null,
+      #   }
+      #   transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+      # when 'button'
+      #   props = ReactDOMButton.getNativeProps(this, props, nativeParent);
+      when 'input'
+        @input_wrapper.mount_wrapper
+        props = @input_wrapper.native_props
+      # when 'option'
+      #   ReactDOMOption.mountWrapper(this, props, nativeParent);
+      #   props = ReactDOMOption.getNativeProps(this, props);
+      # when 'select'
+      #   ReactDOMSelect.mountWrapper(this, props, nativeParent);
+      #   props = ReactDOMSelect.getNativeProps(this, props);
+      #   transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+      # when 'textarea'
+      #   ReactDOMTextarea.mountWrapper(this, props, nativeParent);
+      #   props = ReactDOMTextarea.getNativeProps(this, props);
+      #   transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+      end
+
+      element = create_open_tag_markup_and_put_listeners(mount_ready, @element.props)
+      create_content_markup(mount_ready, element, context)
+    end
+
+    def unmount_component
+      case @tag
+      # when 'iframe', 'img', 'form'
+      #   listeners = this._wrapperState.listeners;
+      #   if (listeners) {
+      #     for (var i = 0; i < listeners.length; i++) {
+      #       listeners[i].remove();
+      #     }
+      #   }
+      when 'input'
+        @input_wrapper.unmount_wrapper
+      end
+
+      unmount_children
+      BrowserEvent.delete_all_listeners(@root_node_id)
+      Mount.purge_id(@root_node_id)
+      @root_node_id = nil
+      # @wrapper_state = null;
+      if @node_with_legacy_properties
+        node = @node_with_legacy_properties
+        node.internal_component = nil
+        @node_with_legacy_properties = nil
+      end
+    end
+
+    def receive_component(next_element, mount_ready, context)
+      prev_element = @element
+      @element = next_element
+      update_component(mount_ready, prev_element, next_element, context);
+    end
+
+    def update_component(mount_ready, prev_element, next_element, context)
+      last_props = prev_element.props
+      next_props = @element.props
+
+      case @tag
+      # when 'button':
+      #   lastProps = ReactDOMButton.getNativeProps(this, lastProps);
+      #   nextProps = ReactDOMButton.getNativeProps(this, nextProps);
+      when 'input'
+        @input_wrapper.update_wrapper
+        last_props = @input_wrapper.native_props(last_props)
+      #   nextProps = ReactDOMInput.getNativeProps(this, nextProps);
+      # when 'option':
+      #   lastProps = ReactDOMOption.getNativeProps(this, lastProps);
+      #   nextProps = ReactDOMOption.getNativeProps(this, nextProps);
+      # when 'select':
+      #   lastProps = ReactDOMSelect.getNativeProps(this, lastProps);
+      #   nextProps = ReactDOMSelect.getNativeProps(this, nextProps);
+      # when 'textarea':
+      #   ReactDOMTextarea.updateWrapper(this);
+      #   lastProps = ReactDOMTextarea.getNativeProps(this, lastProps);
+      #   nextProps = ReactDOMTextarea.getNativeProps(this, nextProps);
+      end
+
+      # assertValidProps(this, nextProps);
+      update_dom_properties(last_props, next_props, mount_ready)
+      update_dom_children(last_props, next_props, mount_ready, context)
+
+      # if (!canDefineProperty && this._nodeWithLegacyProperties) {
+      #   this._nodeWithLegacyProperties.props = nextProps;
+      # }
+
+      if @tag == 'select'
+        mount_ready.enqueue { post_update_select_wrapper }
+      end
+    end
+
+    def public_instance
+      native_node
+    end
+
+    def to_s
+      {
+        tag: @tag,
+        root_node_id: root_node_id,
+        rendered_children: @rendered_children,
+      }.to_s
+    end
+
+    private
+
+    def native_node
+      @native_node ||= Mount.node(@root_node_id)
+    end
+
+    def update_dom_properties(last_props, next_props, mount_ready)
+      style_updates = {}
+
+      last_props.each do |prop_key, prop_value|
+        next if next_props.has_key?(prop_key)
+
+        if prop_key == :style
+          @previous_style_copy.each do |style_name, style|
+            style_updates[style_name] = ''
+          end
+
+          @previous_style_copy = nil
+        elsif BrowserEvent.include?(prop_key)
+          if last_props.has_key? prop_key
+            BrowserEvent.delete_listener(root_node_id, prop_key)
+          end
+        elsif DOMProperty.include?(prop_key) || DOMProperty.is_custom_attribute(prop_key)
+          node = Mount.node(root_node_id)
+          DOMPropertyOperations.delete_value_for_property(node, prop_key, prop_value)
+        end
+      end
+
+      next_props.each do |prop_key, next_prop|
+        last_prop = prop_key == :style ? @previous_style_copy : last_props[prop_key]
+        next if next_prop == last_prop
+
+        if prop_key == :style
+          if next_prop
+            next_prop = @previous_style_copy = next_prop.clone
+          else
+            @previous_style_copy = nil
+          end
+
+          if last_prop
+            last_prop.each do |style_name, style|
+              unless next_prop.has_key?(style_name)
+                style_updates[style_name] = ''
+              end
+            end
+
+            next_prop.each do |style_name, style|
+              if next_prop.has_key?(style_name) && last_prop[style_name] != next_prop[style_name]
+                style_updates[style_name] = next_prop[style_name]
+              end
+            end
+          else
+            style_updates = next_prop
+          end
+        elsif BrowserEvent.include?(prop_key)
+          if next_prop
+            enqueue_put_listener(root_node_id, prop_key, next_prop, mount_ready)
+          elsif last_prop
+            BrowserEvent.delete_listener(root_node_id, prop_key)
+          end
+        elsif is_custom_component(@tag, next_props)
+          node = Mount.node(root_node_id)
+          DOMPropertyOperations.set_value_for_attribute(node, prop_key, next_prop);
+        elsif DOMProperty.include?(prop_key) || DOMProperty.is_custom_attribute(prop_key)
+          node = Mount.node(root_node_id)
+          if next_prop
+            DOMPropertyOperations.set_value_for_property(node, prop_key, next_prop);
+          else
+            DOMPropertyOperations.delete_value_for_property(node, prop_key)
+          end
+        end
+      end
+
+      if style_updates.any?
+        node = Mount.node(root_node_id)
+        node.style(style_updates)
+      end
+    rescue => e
+        p e
+      raise
+    end
+
+    def update_dom_children(last_props, next_props, mount_ready, context)
+      last_content = last_props[:children] if is_text_content(last_props[:children])
+      next_content = next_props[:children] if is_text_content(next_props[:children])
+
+      last_html = last_props[:dangerouslySetInnerHTML].try {|_| _['__html'] }
+      next_html = next_props[:dangerouslySetInnerHTML].try {|_| _['__html'] }
+
+      last_children = last_props[:children] unless last_content
+      next_children = next_props[:children] unless next_content
+
+      last_has_content_or_html = !last_content.nil? || !last_html.nil?
+      next_has_content_or_html = !next_content.nil? || !next_html.nil?
+      if last_children && next_children.nil?
+        update_children(nil, mount_ready, context)
+      elsif last_has_content_or_html && !next_has_content_or_html
+        update_text_content('')
+      end
+
+      if next_content
+        unless last_content == next_content
+          update_text_content(next_content.to_s)
+        end
+      elsif next_html
+        unless last_html == next_html
+          update_markup(next_html.to_s)
+        end
+      elsif next_children
+        update_children(next_children, mount_ready, context)
+      end
+    end
+
+    def create_open_tag_markup_and_put_listeners(mount_ready, props)
+      element = $document.create_element(@tag)
+
+      props.each do |prop_key, prop_value|
+        next unless prop_value
+
+        if BrowserEvent.include?(prop_key)
+          enqueue_put_listener(@root_node_id, prop_key, prop_value, mount_ready)
+        else
+          if prop_key == :style
+            if prop_value
+              prop_value = @previous_style_copy = props[:style].clone
+            end
+            DOMPropertyOperations.create_markup_for_styles(element, prop_value)
+          else
+            if is_custom_component(@tag, props)
+              DOMPropertyOperations.create_markup_for_custom_attribute(element, prop_key, prop_value)
+            else
+              DOMPropertyOperations.create_markup_for_property(element, prop_key, prop_value)
+            end
+          end
+        end
+      end
+
+      #return element if mount_ready.render_to_static_markup
+
+      element[Mount::ID_ATTR_NAME] = @root_node_id
+      element
+    end
+
+    def create_content_markup(mount_ready, element, context)
+      children = @element.props[:children]
+
+      inner_html = @element.props[:dangerouslySetInnerHTML]
+      if inner_html
+        if inner_html[:__html]
+          html = inner_html[:__html]
+          `element.native.innerHTML = html`
+        end
+      elsif is_text_content(children)
+        element.inner_dom = Browser::DOM::Text.create(@element.props[:children])
+      else
+        mount_images = mount_children(@element.props[:children], mount_ready, context)
+        mount_images.each do |image|
+          if image.is_a?(String)
+            element.text = image
+          else
+            image.append_to(element) if image
+          end
+        end
+      end
+      element
+    end
+
+    def enqueue_put_listener(id, event_name, listener, mount_ready)
+      container = Mount.container_for_id(id)
+      if container
+        doc = container.node_type == Browser::DOM::Node::ELEMENT_NODE ? container.document : container
+        BrowserEvent.listen_to(event_name, doc)
+      end
+      mount_ready.enqueue do
+        BrowserEvent.put_listener(id, event_name, listener)
+      end
+    end
+
+    def is_custom_component(tag, props)
+      tag.include?('-') || props.has_key?(:is)
+    end
+
+    def is_text_content(children)
+      case children
+      when String, Numeric
+        true
+      else
+        false
+      end
+    end
+  end
+end