Add SVG Support. closes #118. Thanks @jiayp!

Author: ajjahn

lib/react/api.rb

@@ -74,7 +74,7 @@ def self.create_element(type, properties = {}, &block)
         params << @@component_classes[type]
       elsif type.kind_of?(Class)
         params << create_native_react_class(type)
-      elsif HTML_TAGS.include?(type)
+      elsif React.html_tags?(type)
         params << type
       elsif type.is_a? String
         return React::Element.new(type)
@@ -109,7 +109,7 @@ def self.convert_props(properties)
         elsif ["style", "dangerously_set_inner_HTML"].include? key
           props[lower_camelize(key)] = value.to_n
         else
-          props[React::ATTRIBUTES.include?(lower_camelize(key)) ? lower_camelize(key) : key] = value
+          props[React.html_attrs?(lower_camelize(key)) ? lower_camelize(key) : key] = value
         end
       end
       props.shallow_to_n

lib/react/component.rb

@@ -196,7 +196,7 @@ def method_missing(n, *args, &block)
         node_only = true
         name = name.gsub(/_as_node$/, "")
       end
-      unless (HTML_TAGS.include?(name) || name == 'present'  || name == '_p_tag' || (name = component?(name, self)))
+      unless (React.html_tags?(name) || name == 'present'  || name == '_p_tag' || (name = component?(name, self)))
         return super
       end
 

lib/react/top_level.rb

@@ -10,7 +10,10 @@ module React
                 main map mark menu menuitem meta meter nav noscript object ol optgroup option
                 output p param picture pre progress q rp rt ruby s samp script section select
                 small source span strong style sub summary sup table tbody td textarea tfoot th
-                thead time title tr track u ul var video wbr)
+                thead time title tr track u ul var video wbr) +
+             # The SVG Tags
+             %w(circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline
+                radialGradient rect stop svg text tspan)
   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
@@ -21,7 +24,38 @@ module React
                 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)
+                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)
+
+  def self.html_tags?(name)
+    tags = HTML_TAGS
+    `
+    for(var i = 0; i < tags.length; i++){
+      if(tags[i] === name)
+        return true;
+    }
+    return false;
+    `
+  end
+
+  def self.html_attrs?(name)
+    attrs = ATTRIBUTES
+    `
+    for(var i = 0; i < attrs.length; i++){
+      if(attrs[i] === name)
+        return true;
+    }
+    return false;
+    `
+  end
 
   def self.create_element(type, properties = {}, &block)
     React::API.create_element(type, properties, &block)

spec/react/top_level_component_spec.rb

@@ -60,5 +60,25 @@ def render_top_level(controller, component_name)
   it 'can find the correct component when the name is fully qualified' do
     expect(render_top_level("Controller", "::Components::Component1")).to eq('<span>Components::Component1</span>')
   end
+
+  it 'React.html_tags? will return true for normal html tags' do
+    expect(React.html_tags?('a')).to eq(true)
+    expect(React.html_tags?('div')).to eq(true)
+  end
+
+  it 'React.html_tags? will return true for svg element names' do
+    expect(React.html_tags?('svg')).to eq(true)
+    expect(React.html_tags?('circle')).to eq(true)
+  end
+
+  it 'React.html_attrs? will return true for normal html attribute names' do
+    expect(React.html_attrs?('id')).to eq(true)
+    expect(React.html_attrs?('data')).to eq(true)
+  end
+
+  it 'React.html_attrs? will return true for svg attribute names' do
+    expect(React.html_attrs?('cx')).to eq(true)
+    expect(React.html_attrs?('strokeWidth')).to eq(true)
+  end
 end
 end