90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
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
|
|
};
|