Server render the main page

Also, add hashes to asset file names and use the "entry manifest" plugin in dev to get auto-reloading.
2019-01-12 19:27:28 -08:00
parent 45c48cba26
commit 09914c1db4
176 changed files with 2725 additions and 119822 deletions
--- a/modules/client/MainTemplate.js
+++ b/modules/client/MainTemplate.js
@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import createHTML from './utils/createHTML';
+import x from './utils/execScript';
+
+const promiseShim =
+  'window.Promise || document.write(\'\\x3Cscript src="/es6-promise@4.2.5/dist/es6-promise.min.js">\\x3C/script>\\x3Cscript>ES6Promise.polyfill()\\x3C/script>\')';
+const fetchShim =
+  'window.fetch || document.write(\'\\x3Cscript src="/whatwg-fetch@3.0.0/dist/fetch.umd.js">\\x3C/script>\')';
+
+export default function MainTemplate({
+  title,
+  description,
+  favicon,
+  data,
+  content,
+  globalScripts,
+  entryPoints
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        {description && <meta name="description" content={description} />}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1"
+        />
+        <meta name="timestamp" content={new Date().toISOString()} />
+        {favicon && <link rel="shortcut icon" href={favicon} />}
+        <title>{title}</title>
+        {x(promiseShim)}
+        {x(fetchShim)}
+        {data && x(`window.__DATA__ = ${JSON.stringify(data)}`)}
+      </head>
+      <body>
+        <div id="root" dangerouslySetInnerHTML={content} />
+
+        {globalScripts.map(src => (
+          <script key={src} src={src} />
+        ))}
+
+        {entryPoints.module &&
+          x(`
+          import('${entryPoints.module}');
+          window.supportsDynamicImport = true;
+        `)}
+        {entryPoints.nomodule &&
+          x(`
+          if (!window.supportsDynamicImport) {
+            var s = document.createElement('script');
+            s.src = '/systemjs@2.0.0/dist/s.min.js';
+            s.addEventListener('load', function() {
+              System.import('${entryPoints.nomodule}');
+            });
+            document.head.appendChild(s);
+          }
+        `)}
+      </body>
+    </html>
+  );
+}
+
+MainTemplate.defaultProps = {
+  title: 'UNPKG',
+  description: 'The CDN for everything on npm',
+  favicon: '/favicon.ico',
+  content: createHTML(''),
+  globalScripts: []
+};
+
+const htmlType = PropTypes.shape({
+  __html: PropTypes.string
+});
+
+MainTemplate.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  favicon: PropTypes.string,
+  data: PropTypes.any,
+  content: htmlType,
+  globalScripts: PropTypes.arrayOf(PropTypes.string),
+  entryPoints: PropTypes.shape({
+    module: PropTypes.string,
+    nomodule: PropTypes.string
+  }).isRequired
+};