fix($html): removed wrapping spans in strings and removed IDs for Rea…

…ct component spans
faceyspacey · May 7, 2017 · e590571 · e590571
1 parent 6504859
commit e590571
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 59 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,14 @@
 __fixtures__
+.babelrc
+.codeclimate.yml
+.editorconfig
+.eslintrc.js
+.snyk
+.travis.yml
+wallaby.js
+webpack.config.js
+*.log
+.vscode/
 __tests__
+coverage
 src
diff --git a/README.md b/README.md
@@ -118,7 +118,7 @@ Because of the way Webpack works where "bootstrap" code must be run before any a
 it's imperative bootstrap and common chunks are generated and placed at the beginning, 
 thereby allowing you to place dynamic chunks before your entry chunk which kickstarts app rendering.
 
-In conjunction with your Webpack configuration (which we'll specify below), `flushChunks` solves these problems for you by consuming your Webpack compilation `stats` and generating strings and components you can embed in the final output rendered on the server.
+In conjunction with your Webpack configuration (which we'll specify [below](#webpack-configuration)), `flushChunks` solves these problems for you by consuming your Webpack compilation `stats` and generating strings and components you can embed in the final output rendered on the server.
 
 ## Usage
 

diff --git a/__tests__/__snapshots__/createApiWithCss.test.js.snap b/__tests__/__snapshots__/createApiWithCss.test.js.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 1`] = `
-<span
-  id="__javascript__"
->
+<span>
   <script
     src="/static/0.js"
     type="text/javascript"
@@ -16,9 +14,7 @@ exports[`createApiWithCss() generates js + style components, strings and arrays
 `;
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 2`] = `
-<span
-  id="__styles__"
->
+<span>
   <link
     href="/static/0.css"
     rel="stylesheet"
@@ -31,9 +27,7 @@ exports[`createApiWithCss() generates js + style components, strings and arrays
 `;
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 3`] = `
-<span
-  id="__styles__"
->
+<span>
   <style>
     /Users/jamesgillmore/App/build/0.css- the css! 
     
@@ -44,26 +38,20 @@ exports[`createApiWithCss() generates js + style components, strings and arrays
 `;
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 4`] = `
-"<span id='__javascript__'>
-          <script type='text/javascript' src='/static/0.js'></script>
-<script type='text/javascript' src='/static/main.js'></script>
-        </span>"
+"<script type='text/javascript' src='/static/0.js'></script>
+<script type='text/javascript' src='/static/main.js'></script>"
 `;
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 5`] = `
-"<span id='__styles__'>
-          <link rel='stylesheet' href='/static/0.css' />
-<link rel='stylesheet' href='/static/main.css' />
-        </span>"
+"<link rel='stylesheet' href='/static/0.css' />
+<link rel='stylesheet' href='/static/main.css' />"
 `;
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 6`] = `
-"<span id='__styles__'>
-          <style>/Users/jamesgillmore/App/build/0.css- the css! 
+"<style>/Users/jamesgillmore/App/build/0.css- the css! 
 
 /Users/jamesgillmore/App/build/main.css- the css! 
-</style>
-        </span>"
+</style>"
 `;
 
 exports[`createApiWithCss() generates js + style components, strings and arrays 7`] = `
@@ -81,9 +69,7 @@ Array [
 `;
 
 exports[`createApiWithCss() uses files with extension "no_css.js" if available 1`] = `
-<span
-  id="__javascript__"
->
+<span>
   <script
     src="/static/main.no_css.js"
     type="text/javascript"
@@ -92,9 +78,7 @@ exports[`createApiWithCss() uses files with extension "no_css.js" if available 1
 `;
 
 exports[`createApiWithCss() uses files with extension "no_css.js" if available 2`] = `
-<span
-  id="__styles__"
->
+<span>
   <link
     href="/static/main.css"
     rel="stylesheet"
@@ -103,33 +87,21 @@ exports[`createApiWithCss() uses files with extension "no_css.js" if available 2
 `;
 
 exports[`createApiWithCss() uses files with extension "no_css.js" if available 3`] = `
-<span
-  id="__styles__"
->
+<span>
   <style>
     /Users/jamesgillmore/App/build/main.css- the css! 
     
   </style>
 </span>
 `;
 
-exports[`createApiWithCss() uses files with extension "no_css.js" if available 4`] = `
-"<span id='__javascript__'>
-          <script type='text/javascript' src='/static/main.no_css.js'></script>
-        </span>"
-`;
+exports[`createApiWithCss() uses files with extension "no_css.js" if available 4`] = `"<script type='text/javascript' src='/static/main.no_css.js'></script>"`;
 
-exports[`createApiWithCss() uses files with extension "no_css.js" if available 5`] = `
-"<span id='__styles__'>
-          <link rel='stylesheet' href='/static/main.css' />
-        </span>"
-`;
+exports[`createApiWithCss() uses files with extension "no_css.js" if available 5`] = `"<link rel='stylesheet' href='/static/main.css' />"`;
 
 exports[`createApiWithCss() uses files with extension "no_css.js" if available 6`] = `
-"<span id='__styles__'>
-          <style>/Users/jamesgillmore/App/build/main.css- the css! 
-</style>
-        </span>"
+"<style>/Users/jamesgillmore/App/build/main.css- the css! 
+</style>"
 `;
 
 exports[`createApiWithCss() uses files with extension "no_css.js" if available 7`] = `

diff --git a/src/createApiWithCss.js b/src/createApiWithCss.js
@@ -40,7 +40,7 @@ export default (
     // 1) Use as React components using ReactDOM.renderToStaticMarkup, eg:
     // <html><Styles /><Js /><html>
     Js: () => (
-      <span id='__javascript__'>
+      <span>
         {scripts.map((file, key) => (
           <script
             type='text/javascript'
@@ -51,7 +51,7 @@ export default (
       </span>
     ),
     Styles: () => (
-      <span id='__styles__'>
+      <span>
         {stylesheets.map((file, key) => (
           <link rel='stylesheet' href={`${publicPath}/${file}`} key={key} />
         ))}
@@ -62,23 +62,19 @@ export default (
     js: {
       toString: () =>
         // lazy-loaded in case not used
-        `<span id='__javascript__'>
-          ${scripts
+        scripts
           .map(
             file =>
               `<script type='text/javascript' src='${publicPath}/${file}'></script>`
           )
-          .join('\n')}
-        </span>`
+          .join('\n')
     },
     styles: {
       toString: () =>
         // lazy-loaded in case not used
-        `<span id='__styles__'>
-          ${stylesheets
+        stylesheets
           .map(file => `<link rel='stylesheet' href='${publicPath}/${file}' />`)
-          .join('\n')}
-        </span>`
+          .join('\n')
     },
 
     // 3) Embed the raw css without needing to load another file.
@@ -87,17 +83,15 @@ export default (
     Css: () =>
       (DEV
         ? api.Styles()
-        : <span id='__styles__'>
+        : <span>
           <style>{stylesAsString(stylesheets, outputPath)}</style>
         </span>),
     css: {
       toString: () =>
         // lazy-loaded in case not used
         (DEV
           ? api.styles.toString()
-          : `<span id='__styles__'>
-          <style>${stylesAsString(stylesheets, outputPath)}</style>
-        </span>`)
+          : `<style>${stylesAsString(stylesheets, outputPath)}</style>`)
     },
 
     // 4) names of files without publicPath or outputPath prefixed: