development_mode_plugin.rb in hypernova-1.2.0

- old
+ new

@@ -1,5 +1,7 @@
+require 'erb'
+
 class DevelopmentModePlugin
   def after_response(current_response, _)
     current_response.each do |name, result|
       current_response[name] = result.merge({ "html" => render(name, result) }) if result["error"]
     end
@@ -10,17 +12,31 @@
   def render(name, result)
     <<-HTML
       <div style="background-color: #ff5a5f; color: #fff; padding: 12px;">
         <p style="margin: 0">
           <strong>Development Warning!</strong>
-          The <code>#{name}</code> component failed to render with Hypernova. Error stack:
+          The <code>#{html_escape(name)}</code> component failed to render with Hypernova. Error stack:
         </p>
-        <ul style="padding: 0 20px">
-          <li>#{stack_trace(result).join("</li><li>")}</li>
-        </ul>
+	#{ render_stack_trace(stack_trace(result)) }
       </div>
       #{result["html"]}
     HTML
+  end
+
+  def render_stack_trace(trace)
+    # Put trace that was split in Hypernova back together, verbatim. Sometimes
+    # splitting babel errors makes them more confusing.
+    # https://github.com/airbnb/hypernova/blob/master/src/utils/BatchManager.js
+    text = html_escape(trace.join("\n    "))
+    <<-HTML
+      <div
+        style="white-space: pre-wrap; font-family: monospace; font-size: .95em;"
+      >#{text}</div>
+    HTML
+  end
+
+  def html_escape(string)
+    ::ERB::Util.html_escape(string)
   end
 
   def stack_trace(result)
     result["error"]["stack"] || []
   end