allow render_react_component(name, props, class: "...")

lib/hypernova/blank_renderer.rb

@@ -7,7 +7,7 @@ def initialize(job)
 
   def render
     <<-HTML
-      <div data-hypernova-key="#{key}" data-hypernova-id="#{id}"></div>
+      <div data-hypernova-key="#{key}" data-hypernova-id="#{id}"#{html_attributes}></div>
       <script type="application/json" data-hypernova-key="#{key}" data-hypernova-id="#{id}"><!--#{encode}--></script>
     HTML
   end
@@ -35,4 +35,15 @@ def name
   def id
     @id ||= SecureRandom.uuid
   end
+
+  def html_attributes
+    # handles content_tag()-like options
+    attributes = ''
+    options = job[:html_options]
+    if options && options[:class]
+      escaped_value = "#{options[:class]}".gsub(/"/, '&quot;')
+      attributes << %{ class="#{escaped_value}"}
+    end
+    attributes
+  end
 end

lib/hypernova/controller_helpers.rb

@@ -33,9 +33,10 @@ def hypernova_batch_render(job)
     ##
     # shortcut method to render a react component
     # @param [String] name the hypernova bundle name, like 'packages/p3/foo.bundle.js' (for now)
-    # @param [Hash] props the props to be passed to the component
+    # @param [Hash] data the props to be passed to the component
+    # @param [Hash] html_options the html options, like 'class: "hello"', for the wrapper div element
     # :^)k|8 <-- this is a chill peep riding a skateboard
-    def render_react_component(component, data = {})
+    def render_react_component(component, data = {}, html_options = nil)
       begin
         new_data = get_view_data(component, data)
       rescue StandardError => e
@@ -46,6 +47,7 @@ def render_react_component(component, data = {})
         :data => new_data,
         :name => component,
       }
+      job[:html_options] = html_options if html_options
 
       hypernova_batch_render(job)
     end

spec/blank_renderer_spec.rb

@@ -42,6 +42,27 @@
       expect(str).to match(/>/)
       expect(str).to match(/&/)
     end
+
+    it "renders HTML attributes" do
+      blank_renderer = described_class.new(job.merge(html_options: { class: 'foo bar' }))
+      html = blank_renderer.render
+
+      expect(html).to include(' class="foo bar">')
+    end
+
+    it "renders HTML attributes with curious chars" do
+      blank_renderer = described_class.new(job.merge(html_options: { class: '"foo"' }))
+      html = blank_renderer.render
+
+      expect(html).to include(' class=""foo"">')
+    end
+
+    it "renders HTML attributes with symbol" do
+      blank_renderer = described_class.new(job.merge(html_options: { class: :foo }))
+      html = blank_renderer.render
+
+      expect(html).to include(' class="foo">')
+    end
   end
 
   def blank_html(job, stack_trace = [])