packaton 0.0.22 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "packaton",
-	"version": "0.0.22",
+	"version": "0.0.24",
 	"type": "module",
 	"author": "Eric Fortis",
 	"license": "MIT",
@@ -18,6 +18,6 @@
 		"terser": "^5"
 	},
 	"devDependencies": {
-		"terser": "5.44.1"
+		"terser": "5.46.1"
 	}
 }

package/src/plugins-dev/WatcherDevClient.js

@@ -6,7 +6,7 @@ import { docs } from '../app.js'
 
 export const devClientWatcher = new class extends EventEmitter {
 	emit(file) { super.emit('RELOAD', file) }
-	subscribe(listener) { this.once('RELOAD', listener) }
+	subscribe(listener) { this.on('RELOAD', listener) }
 	unsubscribe(listener) { this.removeListener('RELOAD', listener) }
 }
 

package/src/plugins-dev/watcherDev.js

@@ -1,28 +1,37 @@
 const WATCH_API = '/packaton/watch-dev'
 
-longPollDevChanges()
-async function longPollDevChanges() {
-	try {
-		const response = await fetch(WATCH_API)
-		if (!response.ok)
-			throw response.statusText
-
-		const file = await response.json() || ''
-		if (file.endsWith('.css')) {
-			await hotReloadCSS(file)
-			longPollDevChanges()
-		}
+let es = null
+let timer = null
+
+window.addEventListener('beforeunload', teardown)
+connect()
+function connect() {
+	if (es) return
+
+	clearTimeout(timer)
+	es = new EventSource(WATCH_API)
+
+	es.onmessage = function (event) {
+		const file = event.data
+		if (file.endsWith('.css'))
+			hotReloadCSS(file)
 		else if (file)
 			location.reload()
-		else // server timeout
-			longPollDevChanges()
 	}
-	catch (error) {
-		console.error('hot reload', error?.message || error)
-		setTimeout(longPollDevChanges, 3000)
+
+	es.onerror = function () {
+		console.error('hot reload')
+		teardown()
+		timer = setTimeout(connect, 3000)
 	}
 }
 
+function teardown() {
+	clearTimeout(timer)
+	es?.close()
+	es = null
+}
+
 async function hotReloadCSS(file) {
 	let link = document.querySelector(`link[href^="/${file}"]`)
 	if (link) {

package/src/plugins-prod/media-remaper.js

@@ -33,7 +33,7 @@ export function remapMediaInHTML(mediaHashes, html, mediaRelUrl) {
 }
 
 
-function escapeRegex(literal) {
+function escapeRegex(literal = '') {
 	return literal.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 

package/src/plugins-prod/media-remaper.test.js

@@ -5,25 +5,25 @@ import { remapMediaInHTML } from './media-remaper.js'
 
 describe('Media Remapper', () => {
 	const mHashes = new Map([
-		['alpha.png', '0xFA.png'],
-		['beta.png', '0xFB.png'],
-		['chi.png', '0xFC.png']
+		['/media/alpha.png', '/media/0xFA.png'],
+		['/media/beta.png', '/media/0xFB.png'],
+		['/media/chi.png', '/media/0xFC.png']
 	])
 
 	test('Throws when the file does not exist', () =>
-		throws(() => remapMediaInHTML(mHashes, `<video src="media/missing.mp4">`)))
+		throws(() => remapMediaInHTML(mHashes, `<video src="/media/missing.mp4">`)))
 
 	test('Acceptance', () =>
 		equal(remapMediaInHTML(mHashes, `
-<img src="media/alpha.png">
-<img src="media/alpha.png">
-<img src="media/beta.png">
-<video poster="media/chi.png">`),
+<img src="/media/alpha.png">
+<img src="/media/alpha.png">
+<img src="/media/beta.png">
+<video poster="/media/chi.png">`),
 			`
-<img src="media/0xFA.png">
-<img src="media/0xFA.png">
-<img src="media/0xFB.png">
-<video poster="media/0xFC.png">`))
+<img src="/media/0xFA.png">
+<img src="/media/0xFA.png">
+<img src="/media/0xFB.png">
+<video poster="/media/0xFC.png">`))
 
 
-})
+})

package/src/router.js

@@ -33,16 +33,16 @@ export function router({ srcPath, ignore, mode }) {
 				})
 
 			else if (url === API.watchDev)
-				longPollDevHotReload(req, response)
+				sseDevHotReload(req, response)
 
 			else if (url === WATCHER_DEV)
 				serveAsset(response, join(import.meta.dirname, url))
 
 			else if (docs.hasRoute(url))
-				await serveDocument(response, docs.fileFor(url), isDev)
+				await serveDocument(response, docs.fileFor(url), url, isDev)
 
 			else if (docs.hasRoute(join(url, 'index')))
-				await serveDocument(response, docs.fileFor(join(url, 'index')), isDev)
+				await serveDocument(response, docs.fileFor(join(url, 'index')), '', isDev)
 
 			else if (req.headers.range)
 				await servePartialContent(response, req.headers, join(srcPath, url))
@@ -56,10 +56,10 @@ export function router({ srcPath, ignore, mode }) {
 	}
 }
 
-async function serveDocument(response, file, isDev) {
+async function serveDocument(response, file, url, isDev) {
 	let html = file.endsWith('.html')
 		? await readFile(file, 'utf8')
-		: (await import(file + '?' + Date.now())).default()
+		: (await import(file + '?' + Date.now())).default(url)
 	if (isDev)
 		html += `<script type="module" src="${WATCHER_DEV}"></script>`
 	response.setHeader('Content-Type', mimeFor('html'))
@@ -67,22 +67,30 @@ async function serveDocument(response, file, isDev) {
 }
 
 
-const LONG_POLL_SERVER_TIMEOUT = 8000
+function sseDevHotReload(req, response) {
+	response.writeHead(200, {
+		'Content-Type': 'text/event-stream',
+		'Cache-Control': 'no-cache',
+		'Connection': 'keep-alive',
+	})
+	response.flushHeaders()
 
-function longPollDevHotReload(req, response) {
-	function onDevChange(file) {
-		devClientWatcher.unsubscribe(onDevChange)
-		sendJSON(response, file)
+	function onDevChange(file = '') {
+		response.write(`data: ${file}\n\n`)
 	}
-	response.setTimeout(LONG_POLL_SERVER_TIMEOUT, () => {
-		devClientWatcher.unsubscribe(onDevChange)
-		sendJSON(response, '')
-	})
-	req.on('error', () => {
-		devClientWatcher.unsubscribe(onDevChange)
-		response.destroy()
-	})
+
 	devClientWatcher.subscribe(onDevChange)
+
+	const keepAlive = setInterval(() => {
+		response.write(': ping\n\n')
+	}, 10_000)
+
+	req.on('close', cleanup)
+	req.on('error', cleanup)
+	function cleanup() {
+		clearInterval(keepAlive)
+		devClientWatcher.unsubscribe(onDevChange)
+	}
 }