extract children collection into it’s own class

Author: ajjahn

lib/react/children.rb

@@ -0,0 +1,31 @@
+module React
+  class Children
+    include Enumerable
+    attr_reader :children
+
+    def initialize(children)
+      @children = children
+    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 = React::Element.new(`context`)
+            block.call(element)
+            collection << element
+          }
+        })
+      }
+      collection
+    end
+
+    def length
+      @length ||= `React.Children.count(#{children})`
+    end
+    alias_method :size, :length
+  end
+end

lib/react/component.rb

@@ -2,6 +2,7 @@
 require 'react/ext/hash'
 require 'active_support/core_ext/class/attribute'
 require 'react/callbacks'
+require 'react/children'
 require 'react/rendering_context'
 require 'react/observable'
 require 'react/state'
@@ -61,35 +62,7 @@ def render
     end unless method_defined?(:render)
 
     def children
-      nodes = [`#{@native}.props.children`].flatten
-      class << nodes
-        include Enumerable
-
-        def to_n
-          self
-        end
-
-        def each(&block)
-          if block_given?
-            %x{
-                  React.Children.forEach(#{self.to_n}, function(context){
-            #{block.call(React::Element.new(`context`))}
-                  })
-            }
-            nil
-          else
-            Enumerator.new(`React.Children.count(#{self.to_n})`) do |y|
-              %x{
-                    React.Children.forEach(#{self.to_n}, function(context){
-              #{y << React::Element.new(`context`)}
-                    })
-              }
-            end
-          end
-        end
-      end
-
-      nodes
+      Children.new(`#{@native}.props.children`)
     end
 
     def params

spec/react/children_spec.rb

@@ -0,0 +1,76 @@
+require 'spec_helper'
+
+if opal?
+describe React::Children do
+  let(:component) {
+    Class.new do
+      include React::Component
+      def render
+        div { 'lorem' }
+      end
+    end
+  }
+  let(:childs) { [React.create_element('a'), React.create_element('li')] }
+  let(:element) { React.create_element(component) { childs } }
+  let(:children) { described_class.new(`#{element.to_n}.props.children`) }
+
+  before(:each) do
+    renderElementToDocument(element)
+  end
+
+  it 'is enumerable' do
+    nodes = children.map { |elem| elem.element_type }
+    expect(nodes).to eq(['a', 'li'])
+  end
+
+  it 'returns an Enumerator when not providing a block' do
+    nodes = children.each
+    expect(nodes).to be_a(Enumerator)
+    expect(nodes.size).to eq(2)
+  end
+
+  describe '#each' do
+    it 'returns an array of elements' do
+      nodes = children.each { |elem| elem.element_type }
+      expect(nodes).to be_a(Array)
+      expect(nodes.map(&:class)).to eq(childs.map(&:class))
+    end
+  end
+
+  describe '#length' do
+    it 'returns the number of child elements' do
+      expect(children.length).to eq(2)
+    end
+  end
+
+  describe 'with single child element' do
+    let(:childs) { [React.create_element('a')] }
+
+    it 'is enumerable containing single element' do
+      nodes = children.map { |elem| elem.element_type }
+      expect(nodes).to eq(['a'])
+    end
+
+    describe '#length' do
+      it 'returns the number of child elements' do
+        expect(children.length).to eq(1)
+      end
+    end
+  end
+
+  describe 'with no child element' do
+    let(:element) { React.create_element(component) }
+
+    it 'is enumerable containing no elements' do
+      nodes = children.map { |elem| elem.element_type }
+      expect(nodes).to eq([])
+    end
+
+    describe '#length' do
+      it 'returns the number of child elements' do
+        expect(children.length).to eq(0)
+      end
+    end
+  end
+end
+end

spec/react/component_spec.rb

@@ -687,23 +687,17 @@ def render
       end
     end
 
-    it 'returns an Enumerable' do
+    it 'returns React::Children collection with child elements' do
       ele = React.create_element(Foo) {
         [React.create_element('a'), React.create_element('li')]
       }
       renderElementToDocument(ele)
-      nodes = Foo.the_children.map { |ele| ele.element_type }
-      expect(nodes).to eq(['a', 'li'])
-    end
 
-    it 'returns an Enumerator when not providing a block' do
-      ele = React.create_element(Foo) {
-        [React.create_element('a'), React.create_element('li')]
-      }
-      renderElementToDocument(ele)
-      nodes = Foo.the_children.each
-      expect(nodes).to be_a(Enumerator)
-      expect(nodes.size).to eq(2)
+      children = Foo.the_children
+
+      expect(children).to be_a(React::Children)
+      expect(children.size).to eq(2)
+      expect(children.map(&:element_type)).to eq(['a', 'li'])
     end
   end
 end