markserv 1.17.3 → 1.19.1

package/lib/server.js

@@ -5,13 +5,13 @@ const path = require('path')
 const fs = require('fs')
 
 const chalk = require('chalk')
-const opn = require('opn')
+const opn = require('open')
 const Promise = require('bluebird')
 const connect = require('connect')
 const less = require('less')
 const send = require('send')
-const liveReload = require('livereload')
-const connectLiveReload = require('connect-livereload')
+const WebSocket = require('ws')
+const getPort = require('get-port')
 const implant = require('implant')
 const deepmerge = require('deepmerge')
 const handlebars = require('handlebars')
@@ -111,13 +111,12 @@ const log = (str, flags, err) => {
 	if (flags.silent) {
 		return
 	}
+
 	if (str) {
-		// eslint-disable-next-line no-console
 		console.log(str)
 	}
 
 	if (err) {
-		// eslint-disable-next-line no-console
 		console.error(err)
 	}
 }
@@ -147,8 +146,8 @@ const markdownToHTML = markdownText => new Promise((resolve, reject) => {
 
 	try {
 		result = md.render(markdownText)
-	} catch (err) {
-		return reject(err)
+	} catch (error) {
+		return reject(error)
 	}
 
 	resolve(result)
@@ -160,18 +159,19 @@ const getFile = path => new Promise((resolve, reject) => {
 		if (err) {
 			return reject(err)
 		}
+
 		resolve(data)
 	})
 })
 
 // Get Custom Less CSS to use in all Markdown files
 const buildLessStyleSheet = cssPath =>
-	new Promise(resolve =>
+	new Promise((resolve, reject) =>
 		getFile(cssPath).then(data =>
 			less.render(data).then(data =>
 				resolve(data.css)
 			)
-		)
+		).catch(reject)
 	)
 
 const baseTemplate = (templateUrl, handlebarData) => new Promise((resolve, reject) => {
@@ -221,8 +221,8 @@ const dirToHtml = filePath => {
 		prettyPath += '/'
 	}
 
-	if (prettyPath.substr(prettyPath.length - 2, 2) === '//') {
-		prettyPath = prettyPath.substr(0, prettyPath.length - 1)
+	if (prettyPath.slice(prettyPath.length - 2, 2) === '//') {
+		prettyPath = prettyPath.slice(0, prettyPath.length - 1)
 	}
 
 	urls.forEach(subPath => {
@@ -296,13 +296,37 @@ const createBreadcrumbs = path => {
 }
 
 // Http_request_handler: handles all the browser requests
+const resolveTheme = flags => {
+	if (flags.light) {
+		return 'light'
+	}
+
+	if (flags.synthwave) {
+		return 'synthwave'
+	}
+
+	if (flags.theme && flags.theme !== 'dark') {
+		return flags.theme
+	}
+
+	return 'dark'
+}
+
 const createRequestHandler = flags => {
-	let dir = flags.dir
+	let {dir} = flags
 	const isDir = fs.statSync(dir).isDirectory()
 	if (!isDir) {
 		dir = path.parse(flags.dir).dir
 	}
+
 	flags.$openLocation = path.relative(dir, flags.dir)
+	const theme = resolveTheme(flags)
+	const themeFlags = {
+		themeDark: theme === 'dark',
+		themeLight: theme === 'light',
+		themeSynthwave: theme === 'synthwave',
+		themeSolarized: theme === 'solarized'
+	}
 
 	const implantOpts = {
 		maxDepth: 10
@@ -319,53 +343,69 @@ const createRequestHandler = flags => {
 		}),
 
 		file: (url, opts) => new Promise(resolve => {
+			if (typeof url !== 'string' || typeof (opts && opts.baseDir) !== 'string') {
+				return resolve(false)
+			}
+
 			const absUrl = path.join(opts.baseDir, url)
 			getFile(absUrl)
 				.then(data => {
 					msg('implant', style.link(absUrl), flags)
 					resolve(data)
 				})
-				.catch(err => {
-					warnmsg('implant 404', style.link(absUrl), flags, err)
+				.catch(error => {
+					warnmsg('implant 404', style.link(absUrl), flags, error)
 					resolve(false)
 				})
 		}),
 
 		less: (url, opts) => new Promise(resolve => {
+			if (typeof url !== 'string' || typeof (opts && opts.baseDir) !== 'string') {
+				return resolve(false)
+			}
+
 			const absUrl = path.join(opts.baseDir, url)
 			buildLessStyleSheet(absUrl)
 				.then(data => {
 					msg('implant', style.link(absUrl), flags)
 					resolve(data)
 				})
-				.catch(err => {
-					warnmsg('implant 404', style.link(absUrl), flags, err)
+				.catch(error => {
+					warnmsg('implant 404', style.link(absUrl), flags, error)
 					resolve(false)
 				})
 		}),
 
 		markdown: (url, opts) => new Promise(resolve => {
+			if (typeof url !== 'string' || typeof (opts && opts.baseDir) !== 'string') {
+				return resolve(false)
+			}
+
 			const absUrl = path.join(opts.baseDir, url)
 			getFile(absUrl).then(markdownToHTML)
 				.then(data => {
 					msg('implant', style.link(absUrl), flags)
 					resolve(data)
 				})
-				.catch(err => {
-					warnmsg('implant 404', style.link(absUrl), flags, err)
+				.catch(error => {
+					warnmsg('implant 404', style.link(absUrl), flags, error)
 					resolve(false)
 				})
 		}),
 
 		html: (url, opts) => new Promise(resolve => {
+			if (typeof url !== 'string' || typeof (opts && opts.baseDir) !== 'string') {
+				return resolve(false)
+			}
+
 			const absUrl = path.join(opts.baseDir, url)
 			getFile(absUrl)
 				.then(data => {
 					msg('implant', style.link(absUrl), flags)
 					resolve(data)
 				})
-				.catch(err => {
-					warnmsg('implant 404', style.link(absUrl), flags, err)
+				.catch(error => {
+					warnmsg('implant 404', style.link(absUrl), flags, error)
 					resolve(false)
 				})
 		})
@@ -395,7 +435,12 @@ const createRequestHandler = flags => {
 				filePath,
 				errorMsg,
 				errorStack,
-				referer
+				referer,
+				theme,
+				...themeFlags,
+				hotreload: flags.$hotreload,
+				wsPort: flags.$wsPort,
+				rootDir: flags.dir
 			}
 
 			return baseTemplate(templateUrl, handlebarData).then(final => {
@@ -417,6 +462,7 @@ const createRequestHandler = flags => {
 			if (flags.verbose) {
 				msg('{markserv url}', style.link(markservRelFilePath), flags)
 			}
+
 			send(req, markservRelFilePath).pipe(res)
 			return
 		}
@@ -435,7 +481,7 @@ const createRequestHandler = flags => {
 				isMarkdown = isType(fileTypes.markdown, filePath)
 				isHtml = isType(fileTypes.html, filePath)
 			}
-		} catch (err) {
+		} catch (error) {
 			const fileName = path.parse(filePath).base
 			if (fileName === 'favicon.ico') {
 				res.writeHead(200, {'Content-Type': 'image/x-icon'})
@@ -444,8 +490,8 @@ const createRequestHandler = flags => {
 				return
 			}
 
-			errormsg('404', filePath, flags, err)
-			errorPage(404, filePath, err)
+			errormsg('404', filePath, flags, error)
+			errorPage(404, filePath, error)
 			return
 		}
 
@@ -453,44 +499,62 @@ const createRequestHandler = flags => {
 		if (isMarkdown) {
 			msg('markdown', style.link(prettyPath), flags)
 			getFile(filePath).then(markdownToHTML).then(filePath).then(html => {
-				return implant(html, implantHandlers, implantOpts).then(output => {
+				const contentPromise = flags.templates ?
+					implant(html, implantHandlers, implantOpts) :
+					Promise.resolve(html)
+
+				return contentPromise.then(output => {
 					const templateUrl = path.join(__dirname, 'templates/markdown.html')
 
 					const handlebarData = {
 						title: path.parse(filePath).base,
 						content: output,
-						pid: process.pid | 'N/A'
+						pid: process.pid | 'N/A',
+						theme,
+						...themeFlags,
+						hotreload: flags.$hotreload,
+						wsPort: flags.$wsPort,
+						rootDir: flags.dir
 					}
 
 					return baseTemplate(templateUrl, handlebarData).then(final => {
-						const lvl2Dir = path.parse(templateUrl).dir
-						const lvl2Opts = deepmerge(implantOpts, {baseDir: lvl2Dir})
-
-						return implant(final, implantHandlers, lvl2Opts)
-							.then(output => {
-								res.writeHead(200, {
-									'content-type': 'text/html'
+						if (flags.templates) {
+							const lvl2Dir = path.parse(templateUrl).dir
+							const lvl2Opts = deepmerge(implantOpts, {baseDir: lvl2Dir})
+
+							return implant(final, implantHandlers, lvl2Opts)
+								.then(output => {
+									res.writeHead(200, {
+										'content-type': 'text/html'
+									})
+									res.end(output)
 								})
-								res.end(output)
-							})
+						}
+
+						res.writeHead(200, {
+							'content-type': 'text/html'
+						})
+						res.end(final)
 					})
 				})
-			}).catch(err => {
-				// eslint-disable-next-line no-console
-				console.error(err)
+			}).catch(error => {
+				console.error(error)
 			})
 		} else if (isHtml) {
 			msg('html', style.link(prettyPath), flags)
 			getFile(filePath).then(html => {
-				return implant(html, implantHandlers, implantOpts).then(output => {
+				const contentPromise = flags.templates ?
+					implant(html, implantHandlers, implantOpts) :
+					Promise.resolve(html)
+
+				return contentPromise.then(output => {
 					res.writeHead(200, {
 						'content-type': 'text/html'
 					})
 					res.end(output)
 				})
-			}).catch(err => {
-				// eslint-disable-next-line no-console
-				console.error(err)
+			}).catch(error => {
+				console.error(error)
 			})
 		} else if (isDir) {
 			try {
@@ -504,24 +568,35 @@ const createRequestHandler = flags => {
 					content: dirToHtml(filePath),
 					title: path.parse(filePath).base,
 					pid: process.pid | 'N/A',
-					breadcrumbs: createBreadcrumbs(path.relative(dir, filePath))
+					breadcrumbs: createBreadcrumbs(path.relative(dir, filePath)),
+					theme,
+					...themeFlags,
+					hotreload: flags.$hotreload,
+					wsPort: flags.$wsPort,
+					rootDir: flags.dir
 				}
 
 				return baseTemplate(templateUrl, handlebarData).then(final => {
-					const lvl2Dir = path.parse(templateUrl).dir
-					const lvl2Opts = deepmerge(implantOpts, {baseDir: lvl2Dir})
-					return implant(final, implantHandlers, lvl2Opts).then(output => {
-						res.writeHead(200, {
-							'content-type': 'text/html'
+					if (flags.templates) {
+						const lvl2Dir = path.parse(templateUrl).dir
+						const lvl2Opts = deepmerge(implantOpts, {baseDir: lvl2Dir})
+						return implant(final, implantHandlers, lvl2Opts).then(output => {
+							res.writeHead(200, {
+								'content-type': 'text/html'
+							})
+							res.end(output)
+						}).catch(error => {
+							console.error(error)
 						})
-						res.end(output)
-					}).catch(err => {
-						// eslint-disable-next-line no-console
-						console.error(err)
+					}
+
+					res.writeHead(200, {
+						'content-type': 'text/html'
 					})
+					res.end(final)
 				})
-			} catch (err) {
-				errorPage(500, filePath, err)
+			} catch (error) {
+				errorPage(500, filePath, error)
 			}
 		} else {
 			// Other: Browser requests other MIME typed file (handled by 'send')
@@ -531,11 +606,8 @@ const createRequestHandler = flags => {
 	}
 }
 
-const startConnectApp = (liveReloadPort, httpRequestHandler) => {
+const startConnectApp = httpRequestHandler => {
 	return connect()
-		.use(connectLiveReload({
-			port: liveReloadPort
-		}))
 		.use('/', httpRequestHandler)
 }
 
@@ -552,33 +624,178 @@ const startHTTPServer = (connectApp, port, flags) => {
 	return httpServer
 }
 
-const startLiveReloadServer = (liveReloadPort, flags) => {
-	let dir = flags.dir
+const startHotReload = (wsPort, flags) => {
+	let {dir} = flags
 	const isDir = fs.statSync(dir).isDirectory()
 	if (!isDir) {
 		dir = path.parse(flags.dir).dir
 	}
 
-	const exts = fileTypes.watch.map(type => type.substr(1))
-	const exclusions = fileTypes.exclusions.map(exPath => {
-		return path.join(dir, exPath)
+	const wss = new WebSocket.Server({port: wsPort})
+	const clients = new Map()
+
+	wss.on('connection', ws => {
+		ws.on('message', data => {
+			try {
+				const msg_ = JSON.parse(data)
+				if (msg_.path) {
+					clients.set(ws, msg_.path)
+				}
+			} catch (_) {}
+		})
+
+		ws.on('close', () => {
+			clients.delete(ws)
+		})
 	})
 
-	return liveReload.createServer({
-		exts,
-		exclusions,
-		port: liveReloadPort
-	}).watch(path.resolve(dir))
+	const sendToClients = (sockets, content) => {
+		for (const ws of sockets) {
+			if (ws.readyState === WebSocket.OPEN) {
+				ws.send(content)
+			}
+		}
+	}
+
+	// Debounced file watcher
+	let debounceTimer
+	const watchDir = path.resolve(dir)
+
+	const handleChange = () => {
+		// Group clients by path
+		const pathClients = new Map()
+		for (const [ws, clientPath] of clients) {
+			if (ws.readyState !== WebSocket.OPEN) {
+				continue
+			}
+
+			if (!pathClients.has(clientPath)) {
+				pathClients.set(clientPath, [])
+			}
+
+			pathClients.get(clientPath).push(ws)
+		}
+
+		const implantOpts = {maxDepth: 10}
+
+		const implantHandlers = {
+			markserv: () => new Promise(resolve => {
+				const value = path.relative(dir, __dirname)
+				resolve(value)
+			}),
+
+			file: (url, opts) => new Promise(resolve => {
+				const absUrl = path.join(opts.baseDir, url)
+				getFile(absUrl).then(data => resolve(data)).catch(() => resolve(false))
+			}),
+
+			less: (url, opts) => new Promise(resolve => {
+				const absUrl = path.join(opts.baseDir, url)
+				buildLessStyleSheet(absUrl).then(data => resolve(data)).catch(() => resolve(false))
+			}),
+
+			markdown: (url, opts) => new Promise(resolve => {
+				const absUrl = path.join(opts.baseDir, url)
+				getFile(absUrl).then(markdownToHTML).then(data => resolve(data)).catch(() => resolve(false))
+			}),
+
+			html: (url, opts) => new Promise(resolve => {
+				const absUrl = path.join(opts.baseDir, url)
+				getFile(absUrl).then(data => resolve(data)).catch(() => resolve(false))
+			})
+		}
+
+		for (const [clientPath, sockets] of pathClients) {
+			const decodedUrl = getPathFromUrl(decodeURIComponent(clientPath))
+			const filePath = path.normalize(unescape(dir) + unescape(decodedUrl))
+			const baseDir = path.parse(filePath).dir
+			implantOpts.baseDir = baseDir
+
+			let stat
+			let isDir_
+			let isMarkdown
+
+			try {
+				stat = fs.statSync(filePath)
+				isDir_ = stat.isDirectory()
+				if (!isDir_) {
+					isMarkdown = isType(fileTypes.markdown, filePath)
+				}
+			} catch (_) {
+				continue
+			}
+
+			if (isMarkdown) {
+				getFile(filePath)
+					.then(markdownToHTML)
+					.then(html => implant(html, implantHandlers, Object.assign({}, implantOpts, {baseDir})))
+					.then(output => {
+						sendToClients(sockets, output)
+					})
+					.catch(error => {
+						errormsg('hotreload', filePath, flags, error)
+					})
+			} else if (isDir_) {
+				try {
+					const content = dirToHtml(filePath)
+					const breadcrumbHtml = createBreadcrumbs(path.relative(dir, filePath))
+					let headerHtml = '<h1 class="icon folder isfolder">'
+					for (const crumb of breadcrumbHtml) {
+						headerHtml += `<a href="${crumb.href}">${crumb.text}</a>`
+					}
+
+					headerHtml += '</h1>\n'
+					const fullContent = headerHtml + content +
+						'<footer><sup><hr> Served by <a href="https://www.npmjs.com/package/markserv">MarkServ</a> | PID: ' + (process.pid || 'N/A') + '</sup></footer>'
+
+					sendToClients(sockets, fullContent)
+				} catch (error) {
+					errormsg('hotreload', filePath, flags, error)
+				}
+			}
+		}
+	}
+
+	try {
+		fs.watch(watchDir, {recursive: true}, (eventType, filename) => {
+			if (!filename) {
+				return
+			}
+
+			// Check exclusions
+			for (const exclusion of fileTypes.exclusions) {
+				if (filename.includes(exclusion.replace(/\/$/, ''))) {
+					return
+				}
+			}
+
+			// Check if file extension is watched
+			const ext = path.extname(filename)
+			if (ext && !fileTypes.watch.includes(ext)) {
+				return
+			}
+
+			clearTimeout(debounceTimer)
+			debounceTimer = setTimeout(handleChange, 150)
+		})
+	} catch (error) {
+		errormsg('watch', watchDir, flags, error)
+	}
+
+	return wss
 }
 
-const logActiveServerInfo = async (serveURL, httpPort, liveReloadPort, flags) => {
+const logActiveServerInfo = async (serveURL, httpPort, wsPort, flags) => {
 	const dir = path.resolve(flags.dir)
 
 	const githubLink = 'github.com/markserv'
 
 	msg('address', style.address(serveURL), flags)
 	msg('path', chalk`{grey ${style.address(dir)}}`, flags)
-	msg('livereload', chalk`{grey communicating on port: ${style.port(liveReloadPort)}}`, flags)
+
+	if (wsPort) {
+		msg('hotreload', chalk`{grey ws://localhost:${style.port(wsPort)}}`, flags)
+	}
 
 	if (process.pid) {
 		msg('process', chalk`{grey your pid is: ${style.pid(process.pid)}}`, flags)
@@ -596,7 +813,7 @@ const checkForUpgrade = () => new Promise((resolve, reject) => {
 	}
 
 	analyzeDeps(packageJson).then(analysis => {
-		const latest = analysis.dependencies.markserv.latest
+		const {latest} = analysis.dependencies.markserv
 
 		switch (analysis.dependencies.markserv.status) {
 			case 'error':
@@ -612,9 +829,9 @@ const checkForUpgrade = () => new Promise((resolve, reject) => {
 				resolve(false)
 				break
 		}
-	}).catch(err => {
+	}).catch(error => {
 		console.log('err')
-		reject(err)
+		reject(error)
 	})
 })
 
@@ -628,6 +845,7 @@ const doUpgrade = (newerVersion, flags) => {
 		if (code) {
 			return msg(chalk.bgRed('✨UPGRADE✨'), 'Markserv could not upgrade.', flags)
 		}
+
 		msg(chalk.bgRed('✨UPGRADE✨'), 'Upgrade finished!', flags)
 	})
 }
@@ -660,28 +878,37 @@ const optionalUpgrade = async flags => {
 		}
 
 		logInstallNotes()
-	}).catch(err => {
-		console.error(err)
+	}).catch(error => {
+		console.error(error)
 	})
 }
 
 const init = async flags => {
-	const liveReloadPort = flags.livereloadport
-	const httpPort = flags.port
+	const preferredPort = Number(flags.port) || 8642
+	const httpPort = flags.port ? preferredPort : await getPort({port: preferredPort})
+
+	let wsPort = null
+	const hotreloadEnabled = flags.hotreload !== false && flags.hotreload !== 'false'
+	if (hotreloadEnabled) {
+		wsPort = await getPort({port: httpPort + 1})
+	}
+
+	flags.$wsPort = wsPort
+	flags.$hotreload = hotreloadEnabled
 
 	const httpRequestHandler = createRequestHandler(flags)
-	const connectApp = startConnectApp(liveReloadPort, httpRequestHandler)
+	const connectApp = startConnectApp(httpRequestHandler)
 	const httpServer = await startHTTPServer(connectApp, httpPort, flags)
 
-	let liveReloadServer
-	if (liveReloadPort && liveReloadPort !== 'false') {
-		liveReloadServer = await startLiveReloadServer(liveReloadPort, flags)
+	let hotReloadServer
+	if (hotreloadEnabled) {
+		hotReloadServer = startHotReload(wsPort, flags)
 	}
 
 	const serveURL = 'http://' + flags.address + ':' + httpPort
 
 	// Log server info to CLI
-	logActiveServerInfo(serveURL, httpPort, liveReloadPort, flags)
+	logActiveServerInfo(serveURL, httpPort, wsPort, flags)
 
 	let launchUrl = false
 	if (flags.$openLocation || flags.$pathProvided) {
@@ -691,7 +918,7 @@ const init = async flags => {
 	const service = {
 		pid: process.pid,
 		httpServer,
-		liveReloadServer,
+		hotReloadServer,
 		connectApp,
 		launchUrl
 	}