namespace the pattern json and root container so we don't have name

collisions on view all pages

Author: geoffp

lib/engine_react.js

@@ -70,6 +70,7 @@ var engine_react = {
       const Component = React.createFactory(eval(nodeComponent.code));
 
       return outputTemplate.render({
+        patternPartial: pattern.patternPartial,
         json: JSON.stringify(data),
         htmlOutput: ReactDOMServer.renderToStaticMarkup(Component(data)),
         runtimeCode: runtimeComponent.code
@@ -131,10 +132,10 @@ var engine_react = {
     return unformattedString;
   },
 
-  markupOnlyCodeFormatter(unformattedString) {
+  markupOnlyCodeFormatter(unformattedString, pattern) {
     const $ = cheerio.load(unformattedString);
     console.log('markupOnlyCodeFormatter()');
-    return beautify.html($('#reactContainer').html(), {indent_size: 2});
+    return beautify.html($('.reactPatternContainer').html(), {indent_size: 2});
   }
 };
 

lib/outputTemplate.mustache

@@ -1,9 +1,9 @@
-<div id="reactContainer">
+<div class="reactPatternContainer" id="reactPatternContainer--{{{patternPartial}}}">
   {{{htmlOutput}}}
 </div>
 
 <!-- pattern JSON (React props) -->
-<script id="patternJSON" type="application/json">
+<script data-type="patternJSON" id="patternJSON--{{{patternPartial}}}" type="application/json">
   {{{json}}}
 </script>
 
@@ -13,6 +13,6 @@
 
   <!-- runtime rendering -->
   var component = unknown.default;
-  var patternJSON = document.getElementById('patternJSON').textContent;
-  ReactDOM.render(React.createElement(component, JSON.parse(patternJSON)), document.getElementById('reactContainer'));
+  var patternJSON = document.getElementById('patternJSON--{{{patternPartial}}}').textContent;
+  ReactDOM.render(React.createElement(component, JSON.parse(patternJSON)), document.getElementById('reactPatternContainer--{{{patternPartial}}}'));
 </script>