Add ?module support for HTML files

Closes #113

modules/actions/serveFile.js

@@ -1,4 +1,5 @@
 const serveAutoIndexPage = require("./serveAutoIndexPage");
+const serveHTMLModule = require("./serveHTMLModule");
 const serveJavaScriptModule = require("./serveJavaScriptModule");
 const serveStaticFile = require("./serveStaticFile");
 const serveMetadata = require("./serveMetadata");
@@ -16,7 +17,18 @@ function serveFile(req, res) {
   }
 
   if (req.query.module != null) {
-    return serveJavaScriptModule(req, res);
+    if (req.entry.contentType === "application/javascript") {
+      return serveJavaScriptModule(req, res);
+    }
+
+    if (req.entry.contentType === "text/html") {
+      return serveHTMLModule(req, res);
+    }
+
+    return res
+      .status(403)
+      .type("text")
+      .send("?module mode is available only for JavaScript and HTML files");
   }
 
   serveStaticFile(req, res);

modules/actions/serveHTMLModule.js

@@ -0,0 +1,50 @@
+const etag = require("etag");
+const cheerio = require("cheerio");
+
+const getContentTypeHeader = require("../utils/getContentTypeHeader");
+const rewriteBareModuleIdentifiers = require("../utils/rewriteBareModuleIdentifiers");
+
+function serveHTMLModule(req, res) {
+  try {
+    const $ = cheerio.load(req.entry.content.toString("utf8"));
+
+    $("script[type=module]").each((index, element) => {
+      $(element).html(
+        rewriteBareModuleIdentifiers($(element).html(), req.packageConfig)
+      );
+    });
+
+    const code = $.html();
+
+    res
+      .set({
+        "Content-Length": Buffer.byteLength(code),
+        "Content-Type": getContentTypeHeader(req.entry.contentType),
+        "Cache-Control": "public, max-age=31536000, immutable", // 1 year
+        ETag: etag(code),
+        "Cache-Tag": "file, html-file, html-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 = serveHTMLModule;

modules/actions/serveJavaScriptModule.js

@@ -1,35 +1,9 @@
 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;
-}
+const rewriteBareModuleIdentifiers = require("../utils/rewriteBareModuleIdentifiers");
 
 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"),

modules/middleware/findFile.js

@@ -84,8 +84,10 @@ function searchEntries(tarballStream, entryName, wantsHTML) {
         // and the client wants HTML.
         if (
           entry.name === entryName ||
-          // Allow accessing e.g. `/lib/index.html` using `/lib/`
-          (wantsHTML && entry.name === `${entryName}/index.html`) ||
+          // Allow accessing e.g. `/index.html` using `/`
+          (wantsHTML &&
+            entry.name ===
+              (entryName === "" ? "index.html" : `${entryName}/index.html`)) ||
           // Allow accessing e.g. `/index.js` or `/index.json` using
           // `/index` for compatibility with CommonJS
           (!wantsHTML && entry.name === `${entryName}.js`) ||

modules/utils/rewriteBareModuleIdentifiers.js

@@ -0,0 +1,23 @@
+const babel = require("babel-core");
+
+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;
+}
+
+module.exports = rewriteBareModuleIdentifiers;