mockaton 8.8.2 → 8.9.1

package/README.md

@@ -30,7 +30,7 @@ which is handy for setting up tests  (see **Commander API** below).
 
 
 
-## No Need to Mock Everything
+## Fallback to your Backend
 Mockaton can fallback to your real backend on routes you don’t have mocks
 for. For that, type your backend address in the **Fallback Backend** field.
 

package/TODO.md

@@ -1,4 +1,6 @@
 # TODO
 
 - Refactor tests
-- Dashboard refresh (long polling?)
+- Preserve focus when refreshing dashboard `init()`
+- More real-time updates. Currently, it's only for add/remove mock but not for
+  static files and changes from another client (Browser, or Commander). 

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.8.2",
+	"version": "8.9.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -6,11 +6,12 @@
 import { join } from 'node:path'
 import { cookie } from './cookie.js'
 import { config } from './config.js'
-import { DF, API } from './ApiConstants.js'
 import { parseJSON } from './utils/http-request.js'
 import { listFilesRecursively } from './utils/fs.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
-import { sendOK, sendBadRequest, sendJSON, sendUnprocessableContent, sendDashboardFile, sendForbidden } from './utils/http-response.js'
+import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
+import { countAR_Events, subscribeAR_EventListener, unsubscribeAR_EventListener } from './Watcher.js'
+import { sendOK, sendJSON, sendUnprocessableContent, sendDashboardFile, sendForbidden } from './utils/http-response.js'
 
 
 const dashboardAssets = [
@@ -26,25 +27,26 @@ export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
 	...dashboardAssets.map(f =>
 		[API.dashboard + f, serveDashboardAsset]),
+	[API.cors, getIsCorsAllowed],
+	[API.static, listStaticFiles],
 	[API.mocks, listMockBrokers],
 	[API.cookies, listCookies],
-	[API.comments, listComments],
 	[API.fallback, getProxyFallback],
-	[API.cors, getIsCorsAllowed],
-	[API.collectProxied, getCollectProxied],
-	[API.static, listStaticFiles]
+	[API.arEvents, longPollAR_Events],
+	[API.comments, listComments],
+	[API.collectProxied, getCollectProxied]
 ])
 
 export const apiPatchRequests = new Map([
-	[API.select, selectMock],
+	[API.cors, setCorsAllowed],
 	[API.delay, setRouteIsDelayed],
-	[API.proxied, setRouteIsProxied],
 	[API.reset, reinitialize],
+	[API.select, selectMock],
+	[API.proxied, setRouteIsProxied],
 	[API.cookies, selectCookie],
 	[API.fallback, updateProxyFallback],
-	[API.collectProxied, setCollectProxied],
 	[API.bulkSelect, bulkUpdateBrokersByCommentTag],
-	[API.cors, setCorsAllowed]
+	[API.collectProxied, setCollectProxied]
 ])
 
 /* === GET === */
@@ -52,6 +54,7 @@ export const apiPatchRequests = new Map([
 function serveDashboard(_, response) {
 	sendDashboardFile(response, join(import.meta.dirname, 'Dashboard.html'))
 }
+
 function serveDashboardAsset(req, response) {
 	const f = req.url.replace(API.dashboard, '')
 	if (dashboardAssets.includes(f))
@@ -68,18 +71,34 @@ function getIsCorsAllowed(_, response) { sendJSON(response, config.corsAllowed)
 function getCollectProxied(_, response) { sendJSON(response, config.collectProxied) }
 
 function listStaticFiles(req, response) {
-	try {
-		const files = config.staticDir
-			? listFilesRecursively(config.staticDir).filter(f => !config.ignore.test(f))
-			: []
-		sendJSON(response, files)
+	const files = config.staticDir
+		? listFilesRecursively(config.staticDir).filter(f => !config.ignore.test(f))
+		: []
+	sendJSON(response, files)
+}
+
+function longPollAR_Events(req, response) {
+	// e.g. tab was hidden while new mocks were added or removed
+	const clientIsOutOfSync = parseInt(req.headers[DF.lastReceived_nAR], 10) !== countAR_Events()
+	if (clientIsOutOfSync) {
+		sendJSON(response, countAR_Events())
+		return
 	}
-	catch (error) {
-		sendBadRequest(response, error)
+
+	function onAddOrRemoveMock() {
+		unsubscribeAR_EventListener(onAddOrRemoveMock)
+		sendJSON(response, countAR_Events())
 	}
+	response.setTimeout(LONG_POLL_SERVER_TIMEOUT, onAddOrRemoveMock)
+	req.on('error', () => {
+		unsubscribeAR_EventListener(onAddOrRemoveMock)
+		response.destroy()
+	})
+	subscribeAR_EventListener(onAddOrRemoveMock)
 }
 
 
+
 /* === PATCH === */
 
 function reinitialize(_, response) {
@@ -88,124 +107,84 @@ function reinitialize(_, response) {
 }
 
 async function selectCookie(req, response) {
-	try {
-		const error = cookie.setCurrent(await parseJSON(req))
-		if (error)
-			sendUnprocessableContent(response, error)
-		else
-			sendOK(response)
-	}
-	catch (error) {
-		sendBadRequest(response, error)
-	}
+	const error = cookie.setCurrent(await parseJSON(req))
+	if (error)
+		sendUnprocessableContent(response, error)
+	else
+		sendOK(response)
 }
 
 async function selectMock(req, response) {
-	try {
-		const file = await parseJSON(req)
-		const broker = mockBrokersCollection.getBrokerByFilename(file)
-		if (!broker || !broker.hasMock(file))
-			sendUnprocessableContent(response, `Missing Mock: ${file}`)
-		else {
-			broker.updateFile(file)
-			sendOK(response)
-		}
-	}
-	catch (error) {
-		sendBadRequest(response, error)
+	const file = await parseJSON(req)
+	const broker = mockBrokersCollection.getBrokerByFilename(file)
+	if (!broker || !broker.hasMock(file))
+		sendUnprocessableContent(response, `Missing Mock: ${file}`)
+	else {
+		broker.updateFile(file)
+		sendOK(response)
 	}
 }
 
 async function setRouteIsDelayed(req, response) {
-	try {
-		const body = await parseJSON(req)
-		const delayed = body[DF.delayed]
-		const broker = mockBrokersCollection.getBrokerForUrl(
-			body[DF.routeMethod],
-			body[DF.routeUrlMask])
-
-		if (!broker) // TESTME
-			sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`)
-		else if (typeof delayed !== 'boolean')
-			sendUnprocessableContent(response, `Expected a boolean for "delayed"`) // TESTME
-		else {
-			broker.updateDelay(body[DF.delayed])
-			sendOK(response)
-		}
-	}
-	catch (error) {
-		sendBadRequest(response, error)
+	const body = await parseJSON(req)
+	const delayed = body[DF.delayed]
+	const broker = mockBrokersCollection.getBrokerForUrl(
+		body[DF.routeMethod],
+		body[DF.routeUrlMask])
+
+	if (!broker) // TESTME
+		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`)
+	else if (typeof delayed !== 'boolean')
+		sendUnprocessableContent(response, `Expected a boolean for "delayed"`) // TESTME
+	else {
+		broker.updateDelay(body[DF.delayed])
+		sendOK(response)
 	}
 }
 
 async function setRouteIsProxied(req, response) { // TESTME
-	try {
-		const body = await parseJSON(req)
-		const proxied = body[DF.proxied]
-		const broker = mockBrokersCollection.getBrokerForUrl(
-			body[DF.routeMethod],
-			body[DF.routeUrlMask])
-
-		if (!broker)
-			sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`)
-		else if (typeof proxied !== 'boolean')
-			sendUnprocessableContent(response, `Expected a boolean for "proxied"`)
-		else if (proxied && !config.proxyFallback)
-			sendUnprocessableContent(response, `There’s no proxy fallback`)
-		else {
-			broker.updateProxied(proxied)
-			sendOK(response)
-		}
-	}
-	catch (error) {
-		sendBadRequest(response, error)
+	const body = await parseJSON(req)
+	const proxied = body[DF.proxied]
+	const broker = mockBrokersCollection.getBrokerForUrl(
+		body[DF.routeMethod],
+		body[DF.routeUrlMask])
+
+	if (!broker)
+		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`)
+	else if (typeof proxied !== 'boolean')
+		sendUnprocessableContent(response, `Expected a boolean for "proxied"`)
+	else if (proxied && !config.proxyFallback)
+		sendUnprocessableContent(response, `There’s no proxy fallback`)
+	else {
+		broker.updateProxied(proxied)
+		sendOK(response)
 	}
 }
 
 async function updateProxyFallback(req, response) {
-	try {
-		const fallback = await parseJSON(req)
-		if (fallback && !URL.canParse(fallback)) {
-			sendUnprocessableContent(response)
-			return
-		}
-		if (!fallback) // TESTME
-			mockBrokersCollection.ensureAllRoutesHaveSelectedMock()
-		config.proxyFallback = fallback
-		sendOK(response)
-	}
-	catch (error) {
-		sendBadRequest(response, error)
-	}
+	const fallback = await parseJSON(req)
+	if (fallback && !URL.canParse(fallback)) {
+		sendUnprocessableContent(response)
+		return
+	}
+	if (!fallback) // TESTME
+		mockBrokersCollection.ensureAllRoutesHaveSelectedMock()
+	config.proxyFallback = fallback
+	sendOK(response)
 }
 
 async function setCollectProxied(req, response) {
-	try {
-		config.collectProxied = await parseJSON(req)
-		sendOK(response)
-	}
-	catch (error) {
-		sendBadRequest(response, error)
-	}
+	config.collectProxied = await parseJSON(req)
+	sendOK(response)
 }
 
 async function bulkUpdateBrokersByCommentTag(req, response) {
-	try {
-		mockBrokersCollection.setMocksMatchingComment(await parseJSON(req))
-		sendOK(response)
-	}
-	catch (error) {
-		sendBadRequest(response, error)
-	}
+	mockBrokersCollection.setMocksMatchingComment(await parseJSON(req))
+	sendOK(response)
 }
 
 async function setCorsAllowed(req, response) {
-	try {
-		config.corsAllowed = await parseJSON(req)
-		sendOK(response)
-	}
-	catch (error) {
-		sendBadRequest(response, error)
-	}
+	config.corsAllowed = await parseJSON(req)
+	sendOK(response)
 }
 

package/src/ApiConstants.js

@@ -12,16 +12,20 @@ export const API = {
 	collectProxied: MOUNT + '/collect-proxied',
 	proxied: MOUNT + '/proxied',
 	cors: MOUNT + '/cors',
-	static: MOUNT + '/static'
+	static: MOUNT + '/static',
+	arEvents: MOUNT + '/ar_events'
 }
 
 export const DF = { // Dashboard Fields (XHR)
 	routeMethod: 'route_method',
 	routeUrlMask: 'route_url_mask',
 	delayed: 'delayed',
-	proxied: 'proxied'
+	proxied: 'proxied',
+	lastReceived_nAR: 'last_received_n_ar'
 }
 
 export const DEFAULT_500_COMMENT = '(Mockaton 500)'
 export const DEFAULT_MOCK_COMMENT = '(default)'
 export const EXT_FOR_UNKNOWN_MIME = 'unknown'
+
+export const LONG_POLL_SERVER_TIMEOUT = 8_000

package/src/Commander.js

@@ -1,4 +1,4 @@
-import { API, DF } from './ApiConstants.js'
+import { API, DF, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 
 
 // Client for controlling Mockaton via its HTTP API
@@ -84,4 +84,13 @@ export class Commander {
 	reset() {
 		return this.#patch(API.reset)
 	}
+
+	getAR_EventsCount(nAR_EventReceived) {
+		return fetch(API.arEvents, {
+			signal: AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000),
+			headers: {
+				[DF.lastReceived_nAR]: nAR_EventReceived
+			}
+		})
+	}
 }

package/src/Dashboard.css

@@ -13,7 +13,7 @@
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #f7f7f7;
 		--colorHeaderBackground: #f3f3f3;
-		--colorSecondaryButtonBackground: transparent;
+		--colorSecondaryButtonBackground: #f3f3f3;
 		--colorSecondaryAction: #555;
 		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
@@ -78,18 +78,22 @@ a, button, input[type=checkbox] {
 
 select {
 	font-size: 100%;
-	background: var(--colorComboBoxBackground);
 	color: var(--colorText);
 	cursor: pointer;
 	outline: 0;
 	border-radius: var(--radius);
+	appearance: none;
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") no-repeat;
+	background-color: var(--colorComboBoxBackground);
+	background-size: 16px;
+	background-position: 100% center;
 
 	&:enabled {
 		box-shadow: var(--boxShadow1);
 	}
 	&:enabled:hover {
 		cursor: pointer;
-		background: var(--colorHover);
+		background-color: var(--colorHover);
 	}
 	&:disabled {
 		cursor: not-allowed;
@@ -113,11 +117,11 @@ select {
 	img {
 		width: 130px;
 		align-self: center;
-		margin-right: 18px;
+		margin-right: 20px;
 	}
 
 	.Field {
-		width: 120px;
+		width: 132px;
 
 		span {
 			display: flex;
@@ -131,11 +135,11 @@ select {
 		select {
 			width: 100%;
 			height: 28px;
-			padding: 4px 2px;
+			padding: 4px 8px;
 			border-right: 3px solid transparent;
 			margin-top: 4px;
 			font-size: 11px;
-			background: var(--colorComboBoxHeaderBackground);
+			background-color: var(--colorComboBoxHeaderBackground);
 			border-radius: var(--radius);
 		}
 
@@ -172,15 +176,15 @@ select {
 				gap: 4px;
 
 				input:disabled + span {
-					opacity: 0.7;
+					opacity: 0.8;
 				}
 			}
 		}
 	}
 
 	.BulkSelector {
-		appearance: none;
-		text-align: center;
+		background-image: none;
+		text-align-last: center;
 	}
 
 	.ResetButton {
@@ -276,11 +280,12 @@ select {
 	width: 260px;
 	height: 30px;
 	border: 0;
-	border-left: 3px solid transparent;
+	padding-right: 5px;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
 	font-size: 12px;
+	background-position: 2px center;
 
 	&.nonDefault {
 		font-weight: bold;
@@ -337,7 +342,6 @@ select {
 	> svg {
 		width: 18px;
 		height: 18px;
-		border: 1px solid var(--colorSecondaryAction);
 		vertical-align: bottom;
 		fill: var(--colorSecondaryAction);
 		border-radius: 50%;

package/src/Dashboard.js

@@ -1,6 +1,6 @@
+import { DEFAULT_500_COMMENT } from './ApiConstants.js'
 import { parseFilename } from './Filename.js'
 import { Commander } from './Commander.js'
-import { DEFAULT_500_COMMENT } from './ApiConstants.js'
 
 
 function syntaxHighlightJson(textBody) {
@@ -10,7 +10,6 @@ function syntaxHighlightJson(textBody) {
 		: false
 }
 
-
 const Strings = {
 	bulk_select: 'Bulk Select',
 	bulk_select_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
@@ -57,9 +56,15 @@ const CSS = {
 }
 
 const r = createElement
-
 const mockaton = new Commander(window.location.origin)
 
+init()
+pollAR_Events() // Add or Remove Mocks from File System
+document.addEventListener('visibilitychange', () => {
+	if (!document.hidden)
+		pollAR_Events()
+})
+
 function init() {
 	return Promise.all([
 		mockaton.listMocks(),
@@ -69,20 +74,18 @@ function init() {
 		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
-		.then(data => document.body.replaceChildren(...App(data)))
+		.then(data => document.body.replaceChildren(App(data)))
 		.catch(onError)
 }
-init()
 
 function App([brokersByMethod, cookies, comments, collectProxied, fallbackAddress, staticFiles]) {
-	return [
-		r(Header, { cookies, comments, fallbackAddress, collectProxied }),
-		r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
-		r(StaticFilesList, { staticFiles })
-	]
+	return (
+		r('div', null,
+			r(Header, { cookies, comments, fallbackAddress, collectProxied }),
+			r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
+			r(StaticFilesList, { staticFiles })))
 }
 
-
 // Header ===============
 
 function Header({ cookies, comments, fallbackAddress, collectProxied }) {
@@ -500,11 +503,39 @@ function CloudIcon() {
 }
 
 
+// AR Events (Add or Remove mock) ============
+
+pollAR_Events.isPolling = false
+pollAR_Events.oldAR_EventsCount = 0
+async function pollAR_Events() {
+	if (pollAR_Events.isPolling || document.hidden)
+		return
+	try {
+		pollAR_Events.isPolling = true
+		const response = await mockaton.getAR_EventsCount(pollAR_Events.oldAR_EventsCount)
+		if (response.ok) {
+			const nAR_Events = await response.json()
+			if (pollAR_Events.oldAR_EventsCount !== nAR_Events) { // because it could be < or >
+				pollAR_Events.oldAR_EventsCount = nAR_Events
+				await init()
+			}
+			pollAR_Events.isPolling = false
+			pollAR_Events()
+		}
+		else
+			throw response.status
+	}
+	catch (_) {
+		pollAR_Events.isPolling = false
+		setTimeout(pollAR_Events, 5000)
+	}
+}
+
 
 // Utils ============
 
 function cssClass(...args) {
-	return args.filter(a => a).join(' ')
+	return args.filter(Boolean).join(' ')
 }
 
 
@@ -531,7 +562,7 @@ function createElement(elem, props = null, ...children) {
 				node[key] = value
 			else
 				node.setAttribute(key, value)
-	node.append(...children.flat().filter(a => a))
+	node.append(...children.flat().filter(Boolean))
 	return node
 }
 
@@ -539,7 +570,7 @@ function createSvgElement(tagName, props, ...children) {
 	const elem = document.createElementNS('http://www.w3.org/2000/svg', tagName)
 	for (const [key, value] of Object.entries(props))
 		elem.setAttribute(key, value)
-	elem.append(...children.flat().filter(a => a))
+	elem.append(...children.flat().filter(Boolean))
 	return elem
 }
 

package/src/MockBroker.js

@@ -1,6 +1,6 @@
 import { config } from './config.js'
-import { DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
 import { includesComment, extractComments, parseFilename } from './Filename.js'
+import { DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
 
 
 // MockBroker is a state for a particular route. It knows the available mock files
@@ -70,10 +70,9 @@ export class MockBroker {
 		this.mocks.sort()
 		const defaults = this.mocks.filter(file => includesComment(file, DEFAULT_MOCK_COMMENT))
 		const temp500 = this.mocks.filter(file => includesComment(file, DEFAULT_500_COMMENT))
-		this.mocks = this.mocks.filter(file => !defaults.includes(file) && !temp500.includes(file))
 		this.mocks = [
 			...defaults,
-			...this.mocks,
+			...this.mocks.filter(file => !defaults.includes(file) && !temp500.includes(file)),
 			...temp500
 		]
 	}

package/src/MockDispatcher.js

@@ -4,9 +4,9 @@ import { proxy } from './ProxyRelay.js'
 import { cookie } from './cookie.js'
 import { config } from './config.js'
 import { applyPlugins } from './MockDispatcherPlugins.js'
-import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { BodyReaderError } from './utils/http-request.js'
-import { sendInternalServerError, sendNotFound, sendBadRequest } from './utils/http-response.js'
+import * as mockBrokerCollection from './mockBrokersCollection.js'
+import { sendInternalServerError, sendNotFound, sendUnprocessableContent } from './utils/http-response.js'
 
 
 export async function dispatchMock(req, response) {
@@ -38,7 +38,7 @@ export async function dispatchMock(req, response) {
 	}
 	catch (error) {
 		if (error instanceof BodyReaderError)
-			sendBadRequest(response, error)
+			sendUnprocessableContent(response, error.name)
 		else if (error.code === 'ENOENT') // mock-file has been deleted
 			sendNotFound(response)
 		else if (error.code === 'ERR_UNKNOWN_FILE_EXTENSION') {

package/src/Mockaton.js

@@ -1,15 +1,15 @@
-import { join } from 'node:path'
 import { createServer } from 'node:http'
-import { watch, existsSync } from 'node:fs'
 
 import { API } from './ApiConstants.js'
-import { dispatchMock } from './MockDispatcher.js'
 import { config, setup } from './config.js'
-import { sendNoContent } from './utils/http-response.js'
+import { dispatchMock } from './MockDispatcher.js'
+import { watchMocksDir } from './Watcher.js'
+import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { dispatchStatic, isStatic } from './StaticDispatcher.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
+import { sendNoContent, sendInternalServerError, sendUnprocessableContent } from './utils/http-response.js'
 
 
 process.on('unhandledRejection', error => { throw error })
@@ -17,16 +17,7 @@ process.on('unhandledRejection', error => { throw error })
 export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
-
-	watch(config.mocksDir, { recursive: true, persistent: false },
-		function handleAddedOrDeletedMocks(_, file) {
-			if (!file)
-				return
-			if (existsSync(join(config.mocksDir, file)))
-				mockBrokerCollection.registerMock(file, 'isFromWatcher')
-			else
-				mockBrokerCollection.unregisterMock(file)
-		})
+	watchMocksDir()
 
 	return createServer(onRequest).listen(config.port, config.host, function (error) {
 		const { address, port } = this.address()
@@ -41,34 +32,42 @@ export function Mockaton(options) {
 }
 
 async function onRequest(req, response) {
-	req.on('error', console.error)
 	response.on('error', console.error)
-	response.setHeader('Server', 'Mockaton')
 
-	if (config.corsAllowed)
-		setCorsHeaders(req, response, {
-			origins: config.corsOrigins,
-			headers: config.corsHeaders,
-			methods: config.corsMethods,
-			maxAge: config.corsMaxAge,
-			credentials: config.corsCredentials,
-			exposedHeaders: config.corsExposedHeaders
-		})
+	try {
+		response.setHeader('Server', 'Mockaton')
 
-	const { url, method } = req
+		if (config.corsAllowed)
+			setCorsHeaders(req, response, {
+				origins: config.corsOrigins,
+				headers: config.corsHeaders,
+				methods: config.corsMethods,
+				maxAge: config.corsMaxAge,
+				credentials: config.corsCredentials,
+				exposedHeaders: config.corsExposedHeaders
+			})
 
-	if (isPreflight(req))
-		sendNoContent(response)
+		const { url, method } = req
 
-	else if (method === 'PATCH' && apiPatchRequests.has(url))
-		await apiPatchRequests.get(url)(req, response)
+		if (isPreflight(req))
+			sendNoContent(response)
 
-	else if (method === 'GET' && apiGetRequests.has(url))
-		apiGetRequests.get(url)(req, response)
+		else if (method === 'PATCH' && apiPatchRequests.has(url))
+			await apiPatchRequests.get(url)(req, response)
 
-	else if (method === 'GET' && isStatic(req))
-		await dispatchStatic(req, response)
+		else if (method === 'GET' && apiGetRequests.has(url))
+			apiGetRequests.get(url)(req, response)
 
-	else
-		await dispatchMock(req, response)
+		else if (method === 'GET' && isStatic(req))
+			await dispatchStatic(req, response)
+
+		else
+			await dispatchMock(req, response)
+	}
+	catch (error) {
+		if (error instanceof BodyReaderError)
+			sendUnprocessableContent(response, error.name)
+		else
+			sendInternalServerError(response, error)
+	}
 }

package/src/Mockaton.test.js

@@ -501,7 +501,7 @@ export default function (req, response) {
 async function testStaticFileServing() {
 	await describe('Static File Serving', () => {
 		it('404 path traversal', async () => {
-			const res = await request('/../../../etc/passwd')
+			const res = await request('/../../../../../../../../../../../%2E%2E/etc/passwd')
 			equal(res.status, 404)
 		})
 

package/src/ProxyRelay.js

@@ -1,10 +1,10 @@
 import { join } from 'node:path'
-import { existsSync } from 'node:fs'
 import { randomUUID } from 'node:crypto'
-import { write } from './utils/fs.js'
+
 import { config } from './config.js'
 import { extFor } from './utils/mime.js'
 import { readBody } from './utils/http-request.js'
+import { write, isFile } from './utils/fs.js'
 import { makeMockFilename } from './Filename.js'
 
 
@@ -26,7 +26,7 @@ export async function proxy(req, response) {
 	if (config.collectProxied) {
 		const ext = extFor(proxyResponse.headers.get('content-type'))
 		let filename = makeMockFilename(req.url, req.method, proxyResponse.status, ext)
-		if (existsSync(join(config.mocksDir, filename))) // TESTME
+		if (isFile(join(config.mocksDir, filename))) // TESTME
 			filename = makeMockFilename(req.url + `(${randomUUID()})`, req.method, proxyResponse.status, ext)
 		write(join(config.mocksDir, filename), body)
 	}

package/src/StaticDispatcher.js

@@ -1,5 +1,5 @@
 import { join } from 'node:path'
-import fs, { readFileSync, realpathSync } from 'node:fs'
+import fs, { readFileSync } from 'node:fs'
 
 import { config } from './config.js'
 import { mimeFor } from './utils/mime.js'
@@ -10,12 +10,12 @@ import { sendInternalServerError } from './utils/http-response.js'
 export function isStatic(req) {
 	if (!config.staticDir)
 		return false
-	const f = resolvedAllowedPath(req.url)
+	const f = resolvePath(req.url)
 	return f && !config.ignore.test(f)
 }
 
 export async function dispatchStatic(req, response) {
-	const file = resolvedAllowedPath(req.url)
+	const file = resolvePath(req.url)
 	if (req.headers.range)
 		await sendPartialContent(response, req.headers.range, file)
 	else {
@@ -24,17 +24,12 @@ export async function dispatchStatic(req, response) {
 	}
 }
 
-function resolvedAllowedPath(url) {
-	try {
-		let candidate = realpathSync(join(config.staticDir, url))
-		if (!candidate.startsWith(config.staticDir))
-			return false
-		if (isDirectory(candidate))
-			candidate = join(candidate, 'index.html')
-		if (isFile(candidate))
-			return candidate
-	}
-	catch {}
+function resolvePath(url) { // url is absolute e.g. /home/../.. => /
+	let candidate = join(config.staticDir, url)
+	if (isDirectory(candidate))
+		candidate = join(candidate, 'index.html')
+	if (isFile(candidate))
+		return candidate
 }
 
 async function sendPartialContent(response, range, file) {

package/src/Watcher.js

@@ -0,0 +1,48 @@
+import { join } from 'node:path'
+import { watch } from 'node:fs'
+import { EventEmitter } from 'node:events'
+
+import { config } from './config.js'
+import { isFile } from './utils/fs.js'
+import * as mockBrokerCollection from './mockBrokersCollection.js'
+
+
+let nAR_Events = 0 // AR = Add or Remove Mock
+
+export function countAR_Events() {
+	return nAR_Events
+}
+
+
+const emitter = new EventEmitter()
+
+export function subscribeAR_EventListener(callback) {
+	emitter.on('AR', callback)
+}
+export function unsubscribeAR_EventListener(callback) {
+	emitter.removeListener('AR', callback)
+}
+
+function emitAddOrRemoveMock() {
+	nAR_Events++
+	emitter.emit('AR')
+}
+
+export function watchMocksDir() {
+	const dir = config.mocksDir
+	watch(dir, { recursive: true, persistent: false }, (_, file) => {
+		if (!file)
+			return
+		if (isFile(join(dir, file))) {
+			if (mockBrokerCollection.registerMock(file, 'isFromWatcher'))
+				emitAddOrRemoveMock()
+		}
+		else {
+			mockBrokerCollection.unregisterMock(file)
+			emitAddOrRemoveMock()
+		}
+	})
+}
+
+// TODO staticDir, config changes
+// TODO think about throttling e.g. bulk deletes/remove files

package/src/mockBrokersCollection.js

@@ -35,24 +35,28 @@ export function init() {
 	})
 }
 
+/** @returns {boolean} registered */
 export function registerMock(file, isFromWatcher) {
 	if (getBrokerByFilename(file)?.hasMock(file)
 		|| config.ignore.test(file)
 		|| !filenameIsValid(file))
-		return
+		return false
 
 	const { method, urlMask } = parseFilename(file)
 	collection[method] ??= {}
+
 	if (!collection[method][urlMask])
 		collection[method][urlMask] = new MockBroker(file)
 	else
 		collection[method][urlMask].register(file)
 
-	if (isFromWatcher) {
-		if (!this.file)
-			collection[method][urlMask].selectDefaultFile()
+	if (isFromWatcher && !this.file)
+		collection[method][urlMask].selectDefaultFile()
+
+	if (isFromWatcher)
 		collection[method][urlMask].ensureItHas500()
-	}
+
+	return true
 }
 
 export function unregisterMock(file) {

package/src/utils/http-request.js

@@ -3,7 +3,7 @@ export const StandardMethods = [
 	'HEAD', 'OPTIONS', 'TRACE', 'CONNECT'
 ]
 
-export class BodyReaderError extends Error {}
+export class BodyReaderError extends Error {name = 'BodyReaderError'}
 
 export const parseJSON = req => readBody(req, JSON.parse)
 

package/src/utils/http-response.js

@@ -26,12 +26,6 @@ export function sendDashboardFile(response, file) {
 	response.end(readFileSync(file, 'utf8'))
 }
 
-export function sendBadRequest(response, error) {
-	console.error(error)
-	response.statusCode = 400
-	response.end()
-}
-
 export function sendNotFound(response) {
 	response.statusCode = 404
 	response.end()