Refactoring reload-server to handle index.html by default and runtime…

… optimizations (#326)

Refactoring reload-server to handle index.html by default and runtime optimizations

- using built-in path library
- html files fully supported
- index served if a directory is requested

---------

Co-authored-by: Alexander J. Lallier <[email protected]>

lib/reload-server.js

@@ -1,6 +1,7 @@
 const http = require('http')
 const reload = require('../lib/reload')
 const fs = require('fs')
+const path = require('path')
 const open = require('open')
 const clc = require('cli-color')
 const argv = require('minimist')(process.argv.slice(2))
@@ -25,45 +26,53 @@ const reloadOpts = {
 let time
 let reloadReturned
 
+const tryFiles = (...files) => {
+  while (files.length > 0) {
+    try {
+      return fs.readFileSync(files.shift(), 'utf8')
+    } catch (err) {
+      // no-op
+    }
+  }
+}
+
 const serve = serveStatic(dir, { index: ['index.html', 'index.htm'] })
 
 const server = http.createServer(function (req, res) {
-  let pathname = new URL(req.url, `http://${hostname}`).pathname.slice(1)
+  const pathname = new URL(req.url, `http://${hostname}`).pathname
 
-  const fileEnding = pathname.split('.')[1]
-  const noFileEnding = fileEnding === undefined
+  const ext = path.extname(pathname)
+  const file = path.join(dir, pathname)
 
-  if (fileEnding === 'html' || pathname === '/' || pathname === '' || noFileEnding) { // Server side inject reload code to html files
-    if (pathname === '/' || pathname === '') {
-      pathname = dir + '/' + startPage
-    } else if (noFileEnding) {
-      if (fs.existsSync(dir + '/' + pathname + '.html')) {
-        pathname = dir + '/' + pathname + '.html'
-      } else if (fallback) {
-        pathname = dir + '/' + startPage
-      }
-    } else {
-      pathname = dir + '/' + pathname
-    }
+  // reload script
+  if (pathname === 'reload/reload.js') {
+    res.writeHead(200, { 'Content-Type': 'text/javascript' })
+    return res.end(reloadReturned.reloadClientCode())
+  }
 
-    fs.readFile(pathname, 'utf8', function (err, contents) {
-      if (err) {
-        res.writeHead(404, { 'Content-Type': 'text/plain' })
-        res.end('File Not Found')
-      } else {
-        contents += '\n\n<!-- Inserted by Reload -->\n<script src="/reload/reload.js"></script>\n<!-- End Reload -->\n'
+  // static assets
+  if (ext !== '.html' && ext !== '.htm' && fs.existsSync(file)) {
+    return serve(req, res, finalhandler(req, res))
+  }
 
-        res.setHeader('Content-Type', 'text/html')
-        res.end(contents)
-      }
-    })
-  } else if (pathname === 'reload/reload.js') { // Server reload-client.js file from injected script tag
-    res.setHeader('Content-Type', 'text/javascript')
+  // try html files
+  const content = tryFiles(
+    file,
+    file + '.html',
+    file + '.htm',
+    file + 'index.html',
+    file + 'index.htm',
+    ...(fallback ? [path.join(dir, startPage)] : [])
+  )
 
-    res.end(reloadReturned.reloadClientCode())
-  } else { // Serve any other file using serve-static
-    serve(req, res, finalhandler(req, res))
+  if (content) {
+    res.writeHead(200, { 'Content-Type': 'text/html' })
+    return res.end(content + '\n\n<!-- Inserted by Reload -->\n<script src="/reload/reload.js"></script>\n<!-- End Reload -->\n')
   }
+
+  // 404
+  res.writeHead(404, { 'Content-Type': 'text/plain' })
+  return res.end('File Not Found')
 })
 
 // Reload call and configurations. Stub app as it isn't used here