Inline scripts in HTML files

This commit is contained in:
Michael Jackson 2019-01-24 15:49:21 -08:00
parent e6134b0969
commit ea85062ff6
16 changed files with 350 additions and 136 deletions

View File

@ -1,13 +1,16 @@
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import semver from 'semver';
import MainTemplate from '../client/MainTemplate';
import AutoIndexApp from '../client/autoIndex/App';
import createHTML from '../client/utils/createHTML';
import getScripts from '../utils/getScripts';
import renderTemplate from '../utils/renderTemplate';
import createElement from './utils/createElement';
import createHTML from './utils/createHTML';
import createScript from './utils/createScript';
import getEntryPoint from './utils/getEntryPoint';
import getGlobalScripts from './utils/getGlobalScripts';
import MainTemplate from './utils/MainTemplate';
const doctype = '<!DOCTYPE html>';
const globalURLs =
process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging'
? {
@ -34,24 +37,27 @@ export default function serveAutoIndexPage(req, res) {
entry: req.entry,
entries: req.entries
};
const content = createHTML(
ReactDOMServer.renderToString(React.createElement(AutoIndexApp, data))
const content = createHTML(renderToString(createElement(AutoIndexApp, data)));
const entryPoint = getEntryPoint('autoIndex', 'iife');
const elements = getGlobalScripts(entryPoint, globalURLs).concat(
createScript(entryPoint.code)
);
const scripts = getScripts('autoIndex', globalURLs);
const html = renderTemplate(MainTemplate, {
title: `UNPKG - ${req.packageName}`,
description: `The CDN for ${req.packageName}`,
data,
content,
scripts
});
const html =
doctype +
renderToStaticMarkup(
createElement(MainTemplate, {
title: `UNPKG - ${req.packageName}`,
description: `The CDN for ${req.packageName}`,
data,
content,
elements
})
);
res
.set({
'Cache-Control': 'no-cache, no-store, must-revalidate', // do not cache
'Cache-Control': 'public, max-age=14400', // 4 hours
'Cache-Tag': 'auto-index'
})
.send(html);

View File

@ -1,12 +1,15 @@
import React from 'react';
import { renderToString } from 'react-dom/server';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import MainTemplate from '../client/MainTemplate';
import MainApp from '../client/main/App';
import createHTML from '../client/utils/createHTML';
import getScripts from '../utils/getScripts';
import renderTemplate from '../utils/renderTemplate';
import createElement from './utils/createElement';
import createHTML from './utils/createHTML';
import createScript from './utils/createScript';
import getEntryPoint from './utils/getEntryPoint';
import getGlobalScripts from './utils/getGlobalScripts';
import MainTemplate from './utils/MainTemplate';
const doctype = '<!DOCTYPE html>';
const globalURLs =
process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging'
? {
@ -21,13 +24,19 @@ const globalURLs =
};
export default function serveMainPage(req, res) {
const content = createHTML(renderToString(React.createElement(MainApp)));
const scripts = getScripts('main', globalURLs);
const html = renderTemplate(MainTemplate, { content, scripts });
const content = createHTML(renderToString(createElement(MainApp)));
const entryPoint = getEntryPoint('main', 'iife');
const elements = getGlobalScripts(entryPoint, globalURLs).concat(
createScript(entryPoint.code)
);
const html =
doctype +
renderToStaticMarkup(createElement(MainTemplate, { content, elements }));
res
.set({
'Cache-Control': 'no-cache, no-store, must-revalidate', // do not cache
'Cache-Control': 'public, max-age=14400', // 4 hours
'Cache-Tag': 'main'
})
.send(html);

View File

@ -0,0 +1,71 @@
import React from 'react';
import PropTypes from 'prop-types';
import e from './createElement';
import h from './createHTML';
import x from './createScript';
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,
elements
}) {
return e(
'html',
{ lang: 'en' },
e(
'head',
null,
e('meta', { charSet: 'utf-8' }),
e('meta', { httpEquiv: 'X-UA-Compatible', content: 'IE=edge,chrome=1' }),
description && e('meta', { name: 'description', content: description }),
e('meta', {
name: 'viewport',
content: 'width=device-width,initial-scale=1,maximum-scale=1'
}),
e('meta', { name: 'timestamp', content: new Date().toISOString() }),
favicon && e('link', { rel: 'shortcut icon', href: favicon }),
e('title', null, title),
x(promiseShim),
x(fetchShim),
data && x(`window.__DATA__ = ${JSON.stringify(data)}`)
),
e(
'body',
null,
e('div', { id: 'root', dangerouslySetInnerHTML: content }),
...elements
)
);
}
MainTemplate.defaultProps = {
title: 'UNPKG',
description: 'The CDN for everything on npm',
favicon: '/favicon.ico',
content: h(''),
elements: []
};
if (process.env.NODE_ENV !== 'production') {
const htmlType = PropTypes.shape({
__html: PropTypes.string
});
MainTemplate.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
favicon: PropTypes.string,
data: PropTypes.any,
content: htmlType,
elements: PropTypes.arrayOf(PropTypes.node)
};
}

View File

@ -0,0 +1 @@
export { createElement as default } from 'react';

View File

@ -0,0 +1,8 @@
import createElement from './createElement';
import createHTML from './createHTML';
export default function createScript(script) {
return createElement('script', {
dangerouslySetInnerHTML: createHTML(script)
});
}

View File

@ -0,0 +1,10 @@
import invariant from 'invariant';
import createElement from './createElement';
export default function getGlobalScripts(entryPoint, globalURLs) {
return entryPoint.globalImports.map(id => {
invariant(globalURLs[id], 'Missing global URL for id "%s"', id);
return createElement('script', { src: globalURLs[id] });
});
}

View File

@ -1,68 +0,0 @@
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,
scripts
}) {
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} />
{scripts.map(src => (
<script key={src} src={src} />
))}
</body>
</html>
);
}
MainTemplate.defaultProps = {
title: 'UNPKG',
description: 'The CDN for everything on npm',
favicon: '/favicon.ico',
content: createHTML(''),
scripts: []
};
if (process.env.NODE_ENV !== 'production') {
const htmlType = PropTypes.shape({
__html: PropTypes.string
});
MainTemplate.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
favicon: PropTypes.string,
data: PropTypes.any,
content: htmlType,
scripts: PropTypes.arrayOf(PropTypes.string)
};
}

View File

@ -1,7 +0,0 @@
import React from 'react';
import h from './createHTML';
export default function execScript(code) {
return <script dangerouslySetInnerHTML={h(code)} />;
}

View File

@ -1,16 +0,0 @@
import invariant from 'invariant';
import getEntryPoint from './getEntryPoint';
export default function getScripts(entryName, globalURLs) {
const entryPoint = getEntryPoint(entryName, 'iife');
invariant(entryPoint, 'Invalid entry name "%s"', entryName);
const globalScripts = entryPoint.globalImports.map(id => {
invariant(globalURLs[id], 'Missing global URL for id "%s"', id);
return globalURLs[id];
});
return globalScripts.concat(entryPoint.url);
}

View File

@ -1,11 +0,0 @@
import React from 'react';
import ReactDOMServer from 'react-dom/server';
const doctype = '<!DOCTYPE html>';
export default function renderTemplate(component, props) {
return (
doctype +
ReactDOMServer.renderToStaticMarkup(React.createElement(component, props))
);
}

208
package-lock.json generated
View File

@ -3,6 +3,28 @@
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"@ampproject/rollup-plugin-closure-compiler": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@ampproject/rollup-plugin-closure-compiler/-/rollup-plugin-closure-compiler-0.8.5.tgz",
"integrity": "sha512-/cYzOL/c2gsMqKh9ISdXiSvYY3n8TUukBSl4secUh6URIH4unMPjHROxhyDgNUky4MntEKspfk/jCM8V0b0JDw==",
"dev": true,
"requires": {
"acorn": "6.0.4",
"acorn-dynamic-import": "4.0.0",
"acorn-walk": "6.1.1",
"google-closure-compiler": "20181125.0.1",
"magic-string": "0.25.1",
"temp-write": "3.4.0"
},
"dependencies": {
"acorn": {
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.4.tgz",
"integrity": "sha512-VY4i5EKSKkofY2I+6QLTbTTN/UvEQPCo6eiwzzSaSWfpaDhOmStMCMod6wmuPciNq+XS0faCglFu2lHZpdHUtg==",
"dev": true
}
}
},
"@babel/code-frame": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
@ -909,6 +931,12 @@
"integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
"dev": true
},
"acorn-dynamic-import": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
"integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==",
"dev": true
},
"acorn-globals": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.0.tgz",
@ -2260,6 +2288,35 @@
}
}
},
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
},
"clone-buffer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz",
"integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg=",
"dev": true
},
"clone-stats": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
"integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=",
"dev": true
},
"cloneable-readable": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.2.tgz",
"integrity": "sha512-Bq6+4t+lbM8vhTs/Bef5c5AdEMtapp/iFb6+s4/Hh9MVTt8OLKH7ZOOZSCT+Ys7hsHvqv0GuMPJ1lnQJVHvxpg==",
"dev": true,
"requires": {
"inherits": "^2.0.1",
"process-nextick-args": "^2.0.0",
"readable-stream": "^2.3.5"
}
},
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@ -4062,6 +4119,75 @@
"integrity": "sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg==",
"dev": true
},
"google-closure-compiler": {
"version": "20181125.0.1",
"resolved": "https://registry.npmjs.org/google-closure-compiler/-/google-closure-compiler-20181125.0.1.tgz",
"integrity": "sha512-OMA8eu33V9ObuaBVrt4kKPNZnylKwDXVeb/QixCCCpOerWFM4UlZG/FSJcA4WF8x6WR4pa7N3ivCZbx2+ey8oA==",
"dev": true,
"requires": {
"chalk": "^1.0.0",
"google-closure-compiler-java": "^20181125.0.1",
"google-closure-compiler-js": "^20181125.0.1",
"google-closure-compiler-linux": "^20181125.0.1",
"google-closure-compiler-osx": "^20181125.0.1",
"minimist": "^1.2.0",
"vinyl": "^2.0.1",
"vinyl-sourcemaps-apply": "^0.2.0"
},
"dependencies": {
"ansi-styles": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
"dev": true
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
}
},
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
"dev": true
}
}
},
"google-closure-compiler-java": {
"version": "20181125.0.1",
"resolved": "https://registry.npmjs.org/google-closure-compiler-java/-/google-closure-compiler-java-20181125.0.1.tgz",
"integrity": "sha512-UURFLSpdizI40C7cJ8wAzedZww8hjoWnwW4YKLVsTkenvdI1qe1WsWohGUNxPUJoHODVExJHfTtBlfcigesGKg==",
"dev": true
},
"google-closure-compiler-js": {
"version": "20181125.0.1",
"resolved": "https://registry.npmjs.org/google-closure-compiler-js/-/google-closure-compiler-js-20181125.0.1.tgz",
"integrity": "sha512-3+K8b18kWP6CR+qyYwa6DxN9QuijYZvBYpK8L1Va8urXvbDY07x1hA6tKeiEfHmd19pAp7MUW2Ivv2aquDAozw==",
"dev": true
},
"google-closure-compiler-linux": {
"version": "20181125.0.1",
"resolved": "https://registry.npmjs.org/google-closure-compiler-linux/-/google-closure-compiler-linux-20181125.0.1.tgz",
"integrity": "sha512-yPejZG9x5fIsygo6qG8NbusY4uQ9865I4664KbQ9jJbJitySORzu1/V4QoUM23efrNI4loDGt6gqDGQ1kR7dTw==",
"dev": true,
"optional": true
},
"google-closure-compiler-osx": {
"version": "20181125.0.1",
"resolved": "https://registry.npmjs.org/google-closure-compiler-osx/-/google-closure-compiler-osx-20181125.0.1.tgz",
"integrity": "sha512-jORcziwwlcl/VVeEJLPoPyOB0GyMSeFhzq+B9jaG3ge1q1K2Pcj0fu5rD1QMKuKx70Y3cHWbOXAQVan/jnmLKQ==",
"dev": true,
"optional": true
},
"graceful-fs": {
"version": "4.1.15",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
@ -5468,6 +5594,15 @@
"sourcemap-codec": "^1.4.1"
}
},
"make-dir": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
"integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
"dev": true,
"requires": {
"pify": "^3.0.0"
}
},
"makeerror": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
@ -6104,6 +6239,12 @@
}
}
},
"pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
"dev": true
},
"pinkie": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@ -6321,6 +6462,21 @@
}
}
},
"readable-stream": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"dev": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
"isarray": "~1.0.0",
"process-nextick-args": "~2.0.0",
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
}
},
"realpath-native": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.2.tgz",
@ -6449,6 +6605,12 @@
"is-finite": "^1.0.0"
}
},
"replace-ext": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
"integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
"dev": true
},
"request": {
"version": "2.88.0",
"resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
@ -7493,6 +7655,15 @@
}
}
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
"safe-buffer": "~5.1.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@ -7621,6 +7792,20 @@
"integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
"dev": true
},
"temp-write": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/temp-write/-/temp-write-3.4.0.tgz",
"integrity": "sha1-jP9jD7fp2gXwR8dM5M5NaFRX1JI=",
"dev": true,
"requires": {
"graceful-fs": "^4.1.2",
"is-stream": "^1.1.0",
"make-dir": "^1.0.0",
"pify": "^3.0.0",
"temp-dir": "^1.0.0",
"uuid": "^3.0.1"
}
},
"tempy": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tempy/-/tempy-0.2.1.tgz",
@ -7981,6 +8166,29 @@
"extsprintf": "^1.2.0"
}
},
"vinyl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.0.tgz",
"integrity": "sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==",
"dev": true,
"requires": {
"clone": "^2.1.1",
"clone-buffer": "^1.0.0",
"clone-stats": "^1.0.0",
"cloneable-readable": "^1.0.0",
"remove-trailing-separator": "^1.0.1",
"replace-ext": "^1.0.0"
}
},
"vinyl-sourcemaps-apply": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
"integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
"dev": true,
"requires": {
"source-map": "^0.5.1"
}
},
"w3c-hr-time": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",

View File

@ -20,6 +20,7 @@
"sort-by": "^1.2.0"
},
"devDependencies": {
"@ampproject/rollup-plugin-closure-compiler": "^0.8.5",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.1",
"@babel/preset-env": "^7.2.0",

View File

@ -49,7 +49,8 @@ function entryManifest() {
entryPoints.push({
format: options.format,
globalImports: globalImports,
url: publicPath + fileName
url: publicPath + fileName,
code: info.code
});
});

View File

@ -1,7 +1,10 @@
require('dotenv').config();
const path = require('path');
const builtinModules = require('module').builtinModules;
const babel = require('rollup-plugin-babel');
const commonjs = require('rollup-plugin-commonjs');
const compiler = require('@ampproject/rollup-plugin-closure-compiler');
const json = require('rollup-plugin-json');
const replace = require('rollup-plugin-replace');
const resolve = require('rollup-plugin-node-resolve');
@ -12,9 +15,6 @@ const entryManifest = require('./plugins/entryManifest');
const env = process.env.NODE_ENV || 'development';
const dev = env === 'development';
// Allow storing env vars in .env in dev.
if (dev) require('dotenv').config();
const manifest = entryManifest();
const client = ['main', 'autoIndex'].map(entryName => {
@ -53,7 +53,8 @@ const client = ['main', 'autoIndex'].map(entryName => {
url({
limit: 5 * 1024,
publicPath: '/_client/'
})
}),
compiler(dev ? { formatting: 'PRETTY_PRINT' } : undefined)
]
};
});