Add some helpers for generating HTML pages

server/components/DirectoryListing.js

@@ -1,8 +1,7 @@
-const React = require("react");
 const formatBytes = require("pretty-bytes");
-const getFileContentType = require("../utils/getFileContentType");
 
-const e = React.createElement;
+const getFileContentType = require("../utils/getFileContentType");
+const e = require("./utils/createElement");
 
 function formatTime(time) {
   return new Date(time).toISOString();

server/components/IndexPage.js

@@ -1,11 +1,10 @@
-const React = require("react");
 const semver = require("semver");
 
-const readCSS = require("../utils/readCSS");
-
 const DirectoryListing = require("./DirectoryListing");
-
+const readCSS = require("./utils/readCSS");
-const e = React.createElement;
+const e = require("./utils/createElement");
+const s = require("./utils/createStyle");
+const x = require("./utils/createScript");
 
 const IndexPageStyle = readCSS(__dirname, "IndexPage.css");
 const IndexPageScript = `
@@ -33,7 +32,7 @@ function IndexPage({ packageInfo, version, dir, entries }) {
       null,
       e("meta", { charSet: "utf-8" }),
       e("title", null, `Index of ${dir}`),
-      e("style", { dangerouslySetInnerHTML: { __html: IndexPageStyle } })
+      s(IndexPageStyle)
     ),
     e(
       "body",
@@ -47,7 +46,7 @@ function IndexPage({ packageInfo, version, dir, entries }) {
           e("select", { id: "version", defaultValue: version }, options)
         ),
         e("h1", null, `Index of ${dir}`),
-        e("script", { dangerouslySetInnerHTML: { __html: IndexPageScript } }),
+        x(IndexPageScript),
         e("hr"),
         e(DirectoryListing, { dir, entries }),
         e("hr"),

server/components/MainPage.js

@@ -1,16 +1,10 @@
 const React = require("react");
 const PropTypes = require("prop-types");
 
-const e = React.createElement;
+const e = require("./utils/createElement");
+const x = require("./utils/createScript");
 
-function MainPage({
+function MainPage({ title, description, scripts, styles, content }) {
-  title,
-  description,
-  scripts,
-  styles,
-  webpackManifest,
-  content
-}) {
   return e(
     "html",
     { lang: "en" },
@@ -27,23 +21,12 @@ function MainPage({
       }),
       e("meta", { name: "timestamp", content: new Date().toISOString() }),
       e("link", { rel: "shortcut icon", href: "/favicon.ico" }),
-      e("script", {
+      x(
-        dangerouslySetInnerHTML: {
-          __html:
         "window.Promise || document.write('\\x3Cscript src=\"/_polyfills/es6-promise.min.js\">\\x3C/script>\\x3Cscript>ES6Promise.polyfill()\\x3C/script>')"
-        }
+      ),
-      }),
+      x(
-      e("script", {
-        dangerouslySetInnerHTML: {
-          __html:
         "window.fetch || document.write('\\x3Cscript src=\"/_polyfills/fetch.min.js\">\\x3C/script>')"
-        }
+      ),
-      }),
-      e("script", {
-        dangerouslySetInnerHTML: {
-          __html: "window.webpackManifest = " + JSON.stringify(webpackManifest)
-        }
-      }),
       styles.map(s => e("link", { key: s, rel: "stylesheet", href: s }))
     ),
     e(
@@ -60,7 +43,6 @@ MainPage.propTypes = {
   description: PropTypes.string,
   scripts: PropTypes.arrayOf(PropTypes.string),
   styles: PropTypes.arrayOf(PropTypes.string),
-  webpackManifest: PropTypes.object,
   content: PropTypes.string
 };
 
@@ -69,7 +51,6 @@ MainPage.defaultProps = {
   description: "The CDN for everything on npm",
   scripts: [],
   styles: [],
-  webpackManifest: {},
   content: ""
 };
 

server/components/utils/createElement.js

@@ -0,0 +1,2 @@
+const React = require("react");
+module.exports = React.createElement;

server/components/utils/createScript.js

@@ -0,0 +1,7 @@
+const createElement = require("./createElement");
+
+function createScript(code) {
+  return createElement("script", { dangerouslySetInnerHTML: { __html: code } });
+}
+
+module.exports = createScript;

server/components/utils/createStyle.js

@@ -0,0 +1,7 @@
+const createElement = require("./createElement");
+
+function createStyle(code) {
+  return createElement("style", { dangerouslySetInnerHTML: { __html: code } });
+}
+
+module.exports = createStyle;