186526/unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Server render auto-index pages

Browse Source 
Also, load the autoIndex bundle on the client so we can use React
instead of using an inline script.
This commit is contained in:
Michael Jackson
2018-07-31 10:07:27 -07:00
parent 168ccf5aac
commit 135da0fdc5
62 changed files with 761 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
server/actions/serveAutoIndexPage.js Normal file
View File

@ -0,0 +1,57 @@
const React = require("react");
const ReactDOMServer = require("react-dom/server");
const semver = require("semver");
const MainPage = require("../client/MainPage");
const AutoIndexApp = require("../client/autoIndex/App");
const renderPage = require("../utils/renderPage");
const globalScripts =
process.env.NODE_ENV === "production"
? [
"/react@16.4.1/umd/react.production.min.js",
"/react-dom@16.4.1/umd/react-dom.production.min.js",
"/react-router-dom@4.3.1/umd/react-router-dom.min.js"
]
: [
"/react@16.4.1/umd/react.development.js",
"/react-dom@16.4.1/umd/react-dom.development.js",
"/react-router-dom@4.3.1/umd/react-router-dom.js"
];
function byVersion(a, b) {
return semver.lt(a, b) ? -1 : semver.gt(a, b) ? 1 : 0;
}
function serveAutoIndexPage(req, res) {
const scripts = globalScripts.concat(req.assets.getScripts("autoIndex"));
const styles = req.assets.getStyles("autoIndex");
const props = {
packageName: req.packageName,
packageVersion: req.packageVersion,
availableVersions: Object.keys(req.packageInfo.versions).sort(byVersion),
filename: req.filename,
entry: req.entry,
entries: req.entries
};
const content = ReactDOMServer.renderToString(
React.createElement(AutoIndexApp, props)
);
const html = renderPage(MainPage, {
scripts: scripts,
styles: styles,
data: props,
content: content
});
res
.set({
"Cache-Control": "public,max-age=60", // 1 minute
"Cache-Tag": "auto-index"
})
.send(html);
}
module.exports = serveAutoIndexPage;

158
server/actions/serveFile.js
View File

@ -1,155 +1,7 @@
const fs = require("fs");
const path = require("path");
const etag = require("etag");
const babel = require("babel-core");
const IndexPage = require("../components/IndexPage");
const unpkgRewrite = require("../plugins/unpkgRewrite");
const addLeadingSlash = require("../utils/addLeadingSlash");
const renderPage = require("../utils/renderPage");
function getMatchingEntries(entry, entries) {
const dirname = entry.name || ".";
return Object.keys(entries)
.filter(name => entry.name !== name && path.dirname(name) === dirname)
.map(name => entries[name]);
}
function getMetadata(entry, entries) {
const metadata = {
path: addLeadingSlash(entry.name),
type: entry.type
};
if (entry.type === "file") {
metadata.contentType = entry.contentType;
metadata.integrity = entry.integrity;
metadata.lastModified = entry.lastModified;
metadata.size = entry.size;
} else if (entry.type === "directory") {
metadata.files = getMatchingEntries(entry, entries).map(e =>
getMetadata(e, entries)
);
}
return metadata;
}
function serveMetadata(req, res) {
const metadata = getMetadata(req.entry, req.entries);
res
.set({
"Cache-Control": "public,max-age=31536000", // 1 year
"Cache-Tag": "meta"
})
.send(metadata);
}
function rewriteBareModuleIdentifiers(code, packageConfig) {
const dependencies = Object.assign(
{},
packageConfig.peerDependencies,
packageConfig.dependencies
);
const options = {
// Ignore .babelrc and package.json babel config
// because we haven't installed dependencies so
// we can't load plugins; see #84
babelrc: false,
plugins: [unpkgRewrite(dependencies)]
};
return babel.transform(code, options).code;
}
function getContentTypeHeader(type) {
return type === "application/javascript" ? type + "; charset=utf-8" : type;
}
function serveJavaScriptModule(req, res) {
if (req.entry.contentType !== "application/javascript") {
return res
.status(403)
.type("text")
.send("?module mode is available only for JavaScript files");
}
try {
const code = rewriteBareModuleIdentifiers(
req.entry.content.toString("utf8"),
req.packageConfig
);
res
.set({
"Content-Length": Buffer.byteLength(code),
"Content-Type": getContentTypeHeader(req.entry.contentType),
"Cache-Control": "public,max-age=31536000", // 1 year
ETag: etag(code),
"Cache-Tag": "file,js-file,js-module"
})
.send(code);
} catch (error) {
console.error(error);
const errorName = error.constructor.name;
const errorMessage = error.message.replace(
/^.*?\/unpkg-.+?\//,
`/${req.packageSpec}/`
);
const codeFrame = error.codeFrame;
const debugInfo = `${errorName}: ${errorMessage}\n\n${codeFrame}`;
res
.status(500)
.type("text")
.send(
`Cannot generate module for ${req.packageSpec}${
req.filename
}\n\n${debugInfo}`
);
}
}
function serveStaticFile(req, res) {
const tags = ["file"];
const ext = path.extname(req.entry.name).substr(1);
if (ext) {
tags.push(`${ext}-file`);
}
res
.set({
"Content-Length": req.entry.size,
"Content-Type": getContentTypeHeader(req.entry.contentType),
"Cache-Control": "public,max-age=31536000", // 1 year
"Last-Modified": req.entry.lastModified,
ETag: etag(req.entry.content),
"Cache-Tag": tags.join(",")
})
.send(req.entry.content);
}
function serveIndex(req, res) {
const html = renderPage(IndexPage, {
packageInfo: req.packageInfo,
version: req.packageVersion,
filename: req.filename,
entries: req.entries,
entry: req.entry
});
res
.set({
"Cache-Control": "public,max-age=60", // 1 minute
"Cache-Tag": "index"
})
.send(html);
}
const serveAutoIndexPage = require("./serveAutoIndexPage");
const serveJavaScriptModule = require("./serveJavaScriptModule");
const serveStaticFile = require("./serveStaticFile");
const serveMetadata = require("./serveMetadata");
/**
* Send the file, JSON metadata, or HTML directory listing.
@ -160,7 +12,7 @@ function serveFile(req, res) {
}
if (req.entry.type === "directory") {
return serveIndex(req, res);
return serveAutoIndexPage(req, res);
}
if (req.query.module != null) {

70
server/actions/serveJavaScriptModule.js Normal file
View File

@ -0,0 +1,70 @@
const etag = require("etag");
const babel = require("babel-core");
const getContentTypeHeader = require("../utils/getContentTypeHeader");
const unpkgRewrite = require("../plugins/unpkgRewrite");
function rewriteBareModuleIdentifiers(code, packageConfig) {
const dependencies = Object.assign(
{},
packageConfig.peerDependencies,
packageConfig.dependencies
);
const options = {
// Ignore .babelrc and package.json babel config
// because we haven't installed dependencies so
// we can't load plugins; see #84
babelrc: false,
plugins: [unpkgRewrite(dependencies)]
};
return babel.transform(code, options).code;
}
function serveJavaScriptModule(req, res) {
if (req.entry.contentType !== "application/javascript") {
return res
.status(403)
.type("text")
.send("?module mode is available only for JavaScript files");
}
try {
const code = rewriteBareModuleIdentifiers(
req.entry.content.toString("utf8"),
req.packageConfig
);
res
.set({
"Content-Length": Buffer.byteLength(code),
"Content-Type": getContentTypeHeader(req.entry.contentType),
"Cache-Control": "public,max-age=31536000", // 1 year
ETag: etag(code),
"Cache-Tag": "file,js-file,js-module"
})
.send(code);
} catch (error) {
console.error(error);
const errorName = error.constructor.name;
const errorMessage = error.message.replace(
/^.*?\/unpkg-.+?\//,
`/${req.packageSpec}/`
);
const codeFrame = error.codeFrame;
const debugInfo = `${errorName}: ${errorMessage}\n\n${codeFrame}`;
res
.status(500)
.type("text")
.send(
`Cannot generate module for ${req.packageSpec}${
req.filename
}\n\n${debugInfo}`
);
}
}
module.exports = serveJavaScriptModule;

30
server/actions/serveMainPage.js
View File

@ -1,13 +1,29 @@
const MainPage = require("../components/MainPage");
const MainPage = require("../client/MainPage");
const renderPage = require("../utils/renderPage");
const globalScripts =
process.env.NODE_ENV === "production"
? [
"/react@16.4.1/umd/react.production.min.js",
"/react-dom@16.4.1/umd/react-dom.production.min.js",
"/react-router-dom@4.3.1/umd/react-router-dom.min.js"
]
: [
"/react@16.4.1/umd/react.development.js",
"/react-dom@16.4.1/umd/react-dom.development.js",
"/react-router-dom@4.3.1/umd/react-router-dom.js"
];
function serveMainPage(req, res) {
res.send(
renderPage(MainPage, {
scripts: req.assets.getScripts("main"),
styles: req.assets.getStyles("main")
})
);
const scripts = globalScripts.concat(req.assets.getScripts("main"));
const styles = req.assets.getStyles("main");
const html = renderPage(MainPage, {
scripts: scripts,
styles: styles
});
res.send(html);
}
module.exports = serveMainPage;

44
server/actions/serveMetadata.js Normal file
View File

@ -0,0 +1,44 @@
const path = require("path");
const addLeadingSlash = require("../utils/addLeadingSlash");
function getMatchingEntries(entry, entries) {
const dirname = entry.name || ".";
return Object.keys(entries)
.filter(name => entry.name !== name && path.dirname(name) === dirname)
.map(name => entries[name]);
}
function getMetadata(entry, entries) {
const metadata = {
path: addLeadingSlash(entry.name),
type: entry.type
};
if (entry.type === "file") {
metadata.contentType = entry.contentType;
metadata.integrity = entry.integrity;
metadata.lastModified = entry.lastModified;
metadata.size = entry.size;
} else if (entry.type === "directory") {
metadata.files = getMatchingEntries(entry, entries).map(e =>
getMetadata(e, entries)
);
}
return metadata;
}
function serveMetadata(req, res) {
const metadata = getMetadata(req.entry, req.entries);
res
.set({
"Cache-Control": "public,max-age=31536000", // 1 year
"Cache-Tag": "meta"
})
.send(metadata);
}
module.exports = serveMetadata;

26
server/actions/serveStaticFile.js Normal file
View File

@ -0,0 +1,26 @@
const path = require("path");
const etag = require("etag");
const getContentTypeHeader = require("../utils/getContentTypeHeader");
function serveStaticFile(req, res) {
const tags = ["file"];
const ext = path.extname(req.entry.name).substr(1);
if (ext) {
tags.push(`${ext}-file`);
}
res
.set({
"Content-Length": req.entry.size,
"Content-Type": getContentTypeHeader(req.entry.contentType),
"Cache-Control": "public,max-age=31536000", // 1 year
"Last-Modified": req.entry.lastModified,
ETag: etag(req.entry.content),
"Cache-Tag": tags.join(",")
})
.send(req.entry.content);
}
module.exports = serveStaticFile;