mockaton 8.8.1 → 8.9.0

package/README.md

@@ -23,9 +23,9 @@ other features such as delaying responses, or triggering an autogenerated
 which is handy for setting up tests  (see **Commander API** below).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp860x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp830x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp830x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp830x800.light.gold.png">
 </picture>
 
 

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.1",
+	"version": "8.9.0",
 	"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,27 @@ 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)
-	}
-	catch (error) {
-		sendBadRequest(response, error)
-	}
+	const files = config.staticDir
+		? listFilesRecursively(config.staticDir).filter(f => !config.ignore.test(f))
+		: []
+	sendJSON(response, files)
+}
+
+function longPollAR_Events(req, response) {
+	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 +100,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,7 +12,8 @@ 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)
@@ -25,3 +26,5 @@ export const DF = { // Dashboard Fields (XHR)
 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,10 @@ export class Commander {
 	reset() {
 		return this.#patch(API.reset)
 	}
+
+	getAR_EventsCount() {
+		return fetch(API.arEvents, {
+			signal: AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)
+		})
+	}
 }

package/src/Dashboard.css

@@ -1,18 +1,19 @@
 :root {
 	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-	--radius: 6px
+	--radius: 4px;
+	--radiusSmall: 2px;
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0075db;
-		--colorAccentAlt: #068564;
+		--colorAccentAlt: #068185;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #f7f7f7;
 		--colorHeaderBackground: #f3f3f3;
-		--colorSecondaryButtonBackground: transparent;
+		--colorSecondaryButtonBackground: #f3f3f3;
 		--colorSecondaryAction: #555;
 		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
@@ -77,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;
@@ -112,11 +117,11 @@ select {
 	img {
 		width: 130px;
 		align-self: center;
-		margin-right: 18px;
+		margin-right: 20px;
 	}
 
 	.Field {
-		width: 120px;
+		width: 132px;
 
 		span {
 			display: flex;
@@ -130,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);
 		}
 
@@ -171,25 +176,26 @@ 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 {
-		padding: 4px 12px;
+		padding: 6px 12px;
 		border: 1px solid var(--colorRed);
-		margin-bottom: 4px;
+		margin-left: 4px;
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
 
+
 		&:hover {
 			background: var(--colorRed);
 			color: white;
@@ -255,7 +261,7 @@ select {
 	position: relative;
 	left: -6px;
 	display: inline-block;
-	width: 300px;
+	width: 278px;
 	padding: 8px 6px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
@@ -274,12 +280,17 @@ 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;
+		font-size: 0.92rem;
+	}
 	&.status4xx {
 		background: var(--color4xxBackground);
 	}
@@ -315,32 +326,36 @@ select {
 		}
 
 		&:checked ~ svg {
+			border-color: transparent;
 			background: var(--colorAccent);
 			fill: white;
+			box-shadow: var(--boxShadow1);
 		}
 
 		&:disabled ~ svg {
 			opacity: .5;
 			cursor: not-allowed;
+			box-shadow: none;
 		}
 	}
 
 	> svg {
-		width: 20px;
-		height: 20px;
+		width: 18px;
+		height: 18px;
 		vertical-align: bottom;
 		fill: var(--colorSecondaryAction);
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
-		box-shadow: var(--boxShadow1);
 	}
 }
 
 .ProxyToggler {
+	margin-left: 4px;
 	> svg {
-		width: 24px;
-		padding: 3px;
-		border-radius: 4px;
+		width: 22px;
+		padding: 1px;
+		border-color: transparent;
+		border-radius: var(--radiusSmall);
 	}
 }
 
@@ -362,18 +377,19 @@ select {
 		&:checked ~ span {
 			color: white;
 			background: var(--colorRed);
+			box-shadow: var(--boxShadow1);
 		}
 	}
 
 	> span {
 		padding: 5px 4px;
-		box-shadow: var(--boxShadow1);
 		font-size: 10px;
 		color: var(--colorSecondaryAction);
-		border-radius: 4px;
+		border-radius: var(--radiusSmall);
 		background: var(--colorSecondaryButtonBackground);
 
 		&:hover {
+			box-shadow: var(--boxShadow1);
 			background: var(--colorLightRed);
 			color: var(--colorRed);
 		}
@@ -406,10 +422,6 @@ select {
 	}
 }
 
-.bold {
-	font-weight: bold;
-}
-
 .StaticFilesList {
 	margin-top: 20px;
 

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,13 +10,12 @@ 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.',
 	click_link_to_preview: 'Click a link to preview it',
 	cookie: 'Cookie',
-	cookie_disabled_title: 'No cookies specified in Config.cookies',
+	cookie_disabled_title: 'No cookies specified in config.cookies',
 	delay: 'Delay',
 	empty_response_body: '/* Empty Response Body */',
 	fallback_server: 'Fallback Backend',
@@ -50,16 +49,22 @@ const CSS = {
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
 	StaticFilesList: 'StaticFilesList',
 
-	bold: 'bold',
 	empty: 'empty',
 	chosen: 'chosen',
-	status4xx: 'status4xx'
+	status4xx: 'status4xx',
+	nonDefault: 'nonDefault'
 }
 
 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 }) {
@@ -106,8 +109,7 @@ function Logo() {
 
 function CookieSelector({ cookies }) {
 	function onChange() {
-		mockaton.selectCookie(this.value)
-			.catch(onError)
+		mockaton.selectCookie(this.value).catch(onError)
 	}
 	const disabled = cookies.length <= 1
 	return (
@@ -166,9 +168,7 @@ function ProxyFallbackField({ fallbackAddress, collectProxied }) {
 	return (
 		r('div', { className: cssClass(CSS.Field, CSS.FallbackBackend) },
 			r('label', null,
-				r('span', null,
-					r(CloudIcon),
-					Strings.fallback_server),
+				r('span', null, r(CloudIcon), Strings.fallback_server),
 				r('input', {
 					type: 'url',
 					autocomplete: 'none',
@@ -268,9 +268,6 @@ function PreviewLink({ method, urlMask }) {
 function MockSelector({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(this.value)
-		this.style.fontWeight = this.value === this.options[0].value // default is selected
-			? 'normal'
-			: 'bold'
 		mockaton.select(this.value)
 			.then(init)
 			.then(() => linkFor(method, urlMask)?.click())
@@ -289,14 +286,14 @@ function MockSelector({ broker }) {
 
 	return (
 		r('select', {
-			'data-qaid': urlMask,
+			onChange,
 			autocomplete: 'off',
+			'data-qaid': urlMask,
+			disabled: files.length <= 1,
 			className: cssClass(
 				CSS.MockSelector,
-				selected !== files[0] && CSS.bold,
-				status >= 400 && status < 500 && CSS.status4xx),
-			disabled: files.length <= 1,
-			onChange
+				selected !== files[0] && CSS.nonDefault,
+				status >= 400 && status < 500 && CSS.status4xx)
 		}, files.map(file =>
 			r('option', {
 				value: file,
@@ -304,12 +301,10 @@ function MockSelector({ broker }) {
 			}, file))))
 }
 
-
 function DelayRouteToggler({ broker }) {
 	function onChange() {
-		const { method, urlMask } = parseFilename(this.name)
-		mockaton.setRouteIsDelayed(method, urlMask, this.checked)
-			.catch(onError)
+		const { method, urlMask } = parseFilename(broker.mocks[0])
+		mockaton.setRouteIsDelayed(method, urlMask, this.checked).catch(onError)
 	}
 	return (
 		r('label', {
@@ -318,7 +313,6 @@ function DelayRouteToggler({ broker }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				name: broker.currentMock.file,
 				checked: Boolean(broker.currentMock.delay),
 				onChange
 			}),
@@ -348,14 +342,13 @@ function InternalServerErrorToggler({ broker }) {
 				checked: parseFilename(broker.currentMock.file).status === 500,
 				onChange
 			}),
-			r('span', null, '500')
-		)
-	)
+			r('span', null, '500')))
 }
 
+
 function ProxyToggler({ broker, disabled }) {
 	function onChange() {
-		const { urlMask, method } = parseFilename(this.name)
+		const { urlMask, method } = parseFilename(broker.mocks[0])
 		mockaton.setRouteIsProxied(method, urlMask, this.checked)
 			.then(init)
 			.then(() => linkFor(method, urlMask)?.click())
@@ -369,7 +362,6 @@ function ProxyToggler({ broker, disabled }) {
 			r('input', {
 				type: 'checkbox',
 				disabled,
-				name: broker.currentMock.file,
 				checked: !broker.currentMock.file,
 				onChange
 			}),
@@ -490,6 +482,7 @@ function StaticFilesList({ staticFiles }) {
 }
 
 
+// Misc ===============
 
 function onError(error) {
 	if (error?.message === 'Failed to fetch')
@@ -497,7 +490,6 @@ function onError(error) {
 	console.error(error)
 }
 
-
 function TimerIcon() {
 	return (
 		r('svg', { viewBox: '0 0 24 24' },
@@ -511,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()
+		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(' ')
 }
 
 
@@ -542,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
 }
 
@@ -550,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/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/mockaton-logo.svg

@@ -2,7 +2,7 @@
 <svg version="1.1" viewBox="0 0 570 100" xmlns="http://www.w3.org/2000/svg">
 	<style>
 		:root { --color: #000000; }
-		@media (prefers-color-scheme: light) { :root { --color: #555 } }
+		@media (prefers-color-scheme: light) { :root { --color: #444 } }
 		@media (prefers-color-scheme: dark) { :root { --color: #eee } }
 		path { fill: var(--color) }
 	</style>

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()