mockaton 8.7.3 → 8.7.5

package/README.md

@@ -9,27 +9,27 @@ Mockaton is an HTTP mock server with the goal of making
 your frontend development and testing easier—and a lot more fun.
 
 With Mockaton you don’t need to write code for wiring your mocks.
-Instead, just place your mocks in a directory, and it will scan it
-for filenames that follow a convention similar to the URL paths.
+Instead, just place your mocks in a directory and it will be scanned
+for filenames following a convention similar to the URLs.
 
-For example, for this route `/api/user/1234`, the mock filename would be:
+For example, for `/api/user/1234` the mock filename would be:
 ```
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
 ## Scrapping Mocks from you Backend
 
-Mockaton can fallback to your real backend on routes you don’t have mocks for. That’s
-done by typing your backend address in the **Fallback Backend** field. And if you
-check **Save Mocks**, you can collect those responses that hit 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. And if you
+check **Save Mocks**, it will collect those responses that hit your backend.
 Those mocks will be saved to your `config.mocksDir` following the filename convention.
 
 
 ## Multiple Mock Variants
 
 ### Adding comments in filenames
-Want to mock a locked-out user or an invalid login attempt? You
-can just add a comment to the filename in parentheses. For example:
+Want to mock a locked-out user or an invalid login attempt? 
+Add a comment to the filename in parentheses. For example:
 
 `api/login(locked out user).POST.423.json`
 
@@ -214,8 +214,8 @@ Response Status Code, and File Extension.
 api/user.GET.200.json
 ```
 
-You can also use `.empty` if you don’t want the response to have a 
-`Content-Type` header.
+You can also use `.empty` or `.unknown` if you don’t
+want a `Content-Type` header in the response.
 
 
 ### Dynamic Parameters
@@ -305,10 +305,10 @@ URL, the filename will have `[id]` in their place. For example,
 
 ```
 /api/user/d14e09c8-d970-4b07-be42-b2f4ee22f0a6/likes =>
-my-mocks-dir/api/user/[id]/likes.GET.200.json
+  my-mocks-dir/api/user/[id]/likes.GET.200.json
 ```
 
-Your existing mocks won’t be overwritten (they don’t hit the fallback server).
+Your existing mocks won’t be overwritten (because they don’t hit the fallback server).
 
 <details>
   <summary>Extension Details</summary>
@@ -464,7 +464,7 @@ If you don’t want to open a browser, pass a noop:
 config.onReady = () => {}
 ```
 
-Nonetheless, you can trigger any command besides opening a browser.
+At any rate, you can trigger any command besides opening a browser.
 
 ---
 
@@ -507,9 +507,14 @@ await mockaton.setProxyFallback('http://example.com')
 ```
 Pass an empty string to disable it.
 
+### Set Save Proxied Mocks
+```js
+await mockaton.setCollectProxied(true)
+```
+
 ### Reset
 Re-initialize the collection. The selected mocks, cookies, and delays go back to
-default, but `config.proxyFallback` and `config.corsAllowed` are not affected.
+default, but the `proxyFallback`, `colledProxied`, and `corsAllowed` are not affected.
 ```js
 await mockaton.reset()
 ```

package/package.json

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

package/src/Api.js

@@ -10,17 +10,22 @@ 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, sendFile, sendUnprocessableContent } from './utils/http-response.js'
+import { sendOK, sendBadRequest, sendJSON, sendUnprocessableContent, sendDashboardFile, sendForbidden } from './utils/http-response.js'
 
 
+const dashboardAssets = [
+	'/ApiConstants.js',
+	'/Commander.js',
+	'/Dashboard.css',
+	'/Dashboard.js',
+	'/Filename.js',
+	'/mockaton-logo.svg'
+]
+
 export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
-	[API.dashboard + '/ApiConstants.js', serveDashboardAsset],
-	[API.dashboard + '/Commander.js', serveDashboardAsset],
-	[API.dashboard + '/Dashboard.css', serveDashboardAsset],
-	[API.dashboard + '/Dashboard.js', serveDashboardAsset],
-	[API.dashboard + '/Filename.js', serveDashboardAsset],
-	[API.dashboard + '/mockaton-logo.svg', serveDashboardAsset],
+	...dashboardAssets.map(f =>
+		[API.dashboard + f, serveDashboardAsset]),
 	[API.mocks, listMockBrokers],
 	[API.cookies, listCookies],
 	[API.comments, listComments],
@@ -44,10 +49,14 @@ export const apiPatchRequests = new Map([
 /* === GET === */
 
 function serveDashboard(_, response) {
-	sendFile(response, join(import.meta.dirname, 'Dashboard.html'))
+	sendDashboardFile(response, join(import.meta.dirname, 'Dashboard.html'))
 }
 function serveDashboardAsset(req, response) {
-	sendFile(response, join(import.meta.dirname, req.url.replace(API.dashboard, '')))
+	const f = req.url.replace(API.dashboard, '')
+	if (dashboardAssets.includes(f))
+		sendDashboardFile(response, join(import.meta.dirname, f))
+	else
+		sendForbidden(response)
 }
 
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
@@ -95,9 +104,11 @@ async function selectMock(req, response) {
 		const file = await parseJSON(req)
 		const broker = mockBrokersCollection.getBrokerByFilename(file)
 		if (!broker || !broker.hasMock(file))
-			throw `Missing Mock: ${file}`
-		broker.updateFile(file)
-		sendOK(response)
+			sendUnprocessableContent(response, `Missing Mock: ${file}`)
+		else {
+			broker.updateFile(file)
+			sendOK(response)
+		}
 	}
 	catch (error) {
 		sendBadRequest(response, error)

package/src/Dashboard.css

@@ -1,17 +1,18 @@
 :root {
 	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+	--radius: 6px
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0078e1;
-		--colorAccentAlt: #009c71;
+		--colorAccent: #0075db;
+		--colorAccentAlt: #008664;
 		--colorBackground: #fff;
-		--colorHeaderBackground: #f7f7f7;
-		--colorComboBoxBackground: #f7f7f7;
-		--colorSecondaryButtonBackground: #f5f5f5;
 		--colorComboBoxHeaderBackground: #fff;
+		--colorComboBoxBackground: #f7f7f7;
+		--colorHeaderBackground: #f3f3f3;
+		--colorSecondaryButtonBackground: #f3f3f3;
 		--colorDisabled: #444;
 		--colorHover: #dfefff;
 		--colorLabel: #444;
@@ -64,13 +65,21 @@ select, a, input, button, summary {
 	}
 }
 
+a, button, input[type=checkbox] {
+	cursor: pointer;
+
+	&:active {
+		cursor: grabbing;
+	}
+}
+
 select {
 	font-size: 100%;
 	background: var(--colorComboBoxBackground);
 	color: var(--colorText);
 	cursor: pointer;
 	outline: 0;
-	border-radius: 6px;
+	border-radius: var(--radius);
 
 	&:enabled {
 		box-shadow: var(--boxShadow1);
@@ -122,7 +131,11 @@ select {
 			margin-top: 4px;
 			font-size: 11px;
 			background: var(--colorComboBoxHeaderBackground);
-			border-radius: 6px;
+			border-radius: var(--radius);
+		}
+
+		select:enabled:hover {
+			background: var(--colorHover);
 		}
 
 		&.FallbackBackend {
@@ -165,7 +178,6 @@ select {
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
-		cursor: pointer;
 
 		&:hover {
 			background: var(--colorRed);
@@ -234,7 +246,7 @@ select {
 	display: inline-block;
 	width: 280px;
 	padding: 8px 6px;
-	border-radius: 6px;
+	border-radius: var(--radius);
 	color: var(--colorAccent);
 	text-decoration: none;
 
@@ -292,8 +304,8 @@ select {
 	}
 
 	> svg {
-		width: 16px;
-		height: 16px;
+		width: 20px;
+		height: 20px;
 		vertical-align: bottom;
 		fill: var(--colorText);
 		border-radius: 50%;
@@ -329,7 +341,7 @@ select {
 	}
 
 	> span {
-		padding: 4px;
+		padding: 5px 4px;
 		box-shadow: var(--boxShadow1);
 		font-size: 10px;
 		color: var(--colorText);
@@ -374,13 +386,10 @@ select {
 }
 
 .StaticFilesList {
-	margin-top: 40px;
+	margin-top: 20px;
 
-	summary {
-		width: max-content;
+	h2 {
 		margin-bottom: 8px;
-		cursor: pointer;
-		font-weight: bold;
 	}
 
 	ul {
@@ -395,7 +404,7 @@ select {
 	a {
 		display: inline-block;
 		padding: 6px;
-		border-radius: 6px;
+		border-radius: var(--radius);
 		color: var(--colorAccentAlt);
 		text-decoration: none;
 

package/src/Dashboard.js

@@ -3,6 +3,14 @@ import { Commander } from './Commander.js'
 import { DEFAULT_500_COMMENT } from './ApiConstants.js'
 
 
+function syntaxHighlightJson(textBody) {
+	const prism = window.Prism
+	return prism?.highlight && prism?.languages?.json
+		? prism.highlight(textBody, prism.languages.json, 'json')
+		: false
+}
+
+
 const Strings = {
 	bulk_select_by_comment: 'Bulk Select by Comment',
 	bulk_select_by_comment_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
@@ -19,7 +27,7 @@ const Strings = {
 	pick: 'Pick…',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
-	static: 'Static'
+	static_get: 'Static GET'
 }
 
 const CSS = {
@@ -45,8 +53,6 @@ const CSS = {
 }
 
 const r = createElement
-const refPayloadViewer = useRef()
-const refPayloadViewerFileTitle = useRef()
 
 const mockaton = new Commander(window.location.origin)
 
@@ -59,10 +65,7 @@ function init() {
 		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
-		.then(data => {
-			empty(document.body)
-			document.body.append(...App(data))
-		})
+		.then(data => document.body.replaceChildren(...App(data)))
 		.catch(onError)
 }
 init()
@@ -118,9 +121,10 @@ function CookieSelector({ cookies }) {
 function BulkSelector({ comments }) {
 	// UX wise this should be a menu instead of this `select`.
 	// But this way is easier to implement, with a few hacks.
+	const firstOption = Strings.pick
 	function onChange() {
 		const value = this.value
-		this.value = Strings.pick // Hack 
+		this.value = firstOption // Hack 
 		mockaton.bulkSelectByComment(value)
 			.then(init)
 			.catch(onError)
@@ -128,7 +132,7 @@ function BulkSelector({ comments }) {
 	const disabled = !comments.length
 	const list = disabled
 		? []
-		: [Strings.pick].concat(comments)
+		: [firstOption].concat(comments)
 	return (
 		r('label', { className: CSS.Field },
 			r('span', null, Strings.bulk_select_by_comment),
@@ -144,14 +148,14 @@ function BulkSelector({ comments }) {
 }
 
 function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
-	const refSaveProxiedCheckbox = useRef()
-	function onChange(event) {
-		const input = event.currentTarget
-		refSaveProxiedCheckbox.current.disabled = !input.validity.valid || !input.value.trim()
-		if (!input.validity.valid)
-			input.reportValidity()
+	function onChange() {
+		const saveCheckbox = this.closest(`.${CSS.FallbackBackend}`).querySelector('[type=checkbox]')
+		saveCheckbox.disabled = !this.validity.valid || !this.value.trim()
+
+		if (!this.validity.valid)
+			this.reportValidity()
 		else
-			mockaton.setProxyFallback(input.value.trim()).catch(onError)
+			mockaton.setProxyFallback(this.value.trim()).catch(onError)
 	}
 	return (
 		r('div', { className: cssClass(CSS.Field, CSS.FallbackBackend) },
@@ -166,20 +170,17 @@ function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
 				})),
 			r(SaveProxiedCheckbox, {
 				collectProxied,
-				disabled: !fallbackAddress,
-				ref: refSaveProxiedCheckbox
+				disabled: !fallbackAddress
 			})))
 }
 
-function SaveProxiedCheckbox({ ref, disabled, collectProxied }) {
-	function onChange(event) {
-		mockaton.setCollectProxied(event.currentTarget.checked)
-			.catch(onError)
+function SaveProxiedCheckbox({ disabled, collectProxied }) {
+	function onChange() {
+		mockaton.setCollectProxied(this.checked).catch(onError)
 	}
 	return (
 		r('label', { className: CSS.SaveProxiedCheckbox },
 			r('input', {
-				ref,
 				type: 'checkbox',
 				disabled,
 				checked: collectProxied,
@@ -238,14 +239,7 @@ function PreviewLink({ method, urlMask }) {
 	async function onClick(event) {
 		event.preventDefault()
 		try {
-			const preloader = setTimeout(() => {
-				empty(refPayloadViewer.current)
-				refPayloadViewer.current.append(PayloadViewerProgressBar())
-			}, 180)
-
-			const response = await fetch(this.href, { method })
-			clearTimeout(preloader)
-			await updatePayloadViewer(method, urlMask, this.href, response)
+			await previewMock(method, urlMask, this.href)
 			document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
 			this.classList.add(CSS.chosen)
 		}
@@ -306,9 +300,9 @@ function MockSelector({ broker }) {
 
 
 function DelayRouteToggler({ broker }) {
-	function onChange(event) {
+	function onChange() {
 		const { method, urlMask } = parseFilename(this.name)
-		mockaton.setRouteIsDelayed(method, urlMask, event.currentTarget.checked)
+		mockaton.setRouteIsDelayed(method, urlMask, this.checked)
 			.catch(onError)
 	}
 	return (
@@ -333,11 +327,12 @@ function DelayRouteToggler({ broker }) {
 
 
 function InternalServerErrorToggler({ broker }) {
-	function onChange(event) {
+	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
-		mockaton.select(event.currentTarget.checked
-			? broker.mocks.find(f => parseFilename(f).status === 500)
-			: broker.mocks[0])
+		mockaton.select(
+			this.checked
+				? broker.mocks.find(f => parseFilename(f).status === 500)
+				: broker.mocks[0])
 			.then(init)
 			.then(() => linkFor(method, urlMask)?.click())
 			.catch(onError)
@@ -358,18 +353,24 @@ function InternalServerErrorToggler({ broker }) {
 	)
 }
 
-function PayloadViewerProgressBar() {
-	return (
-		r('div', { className: CSS.ProgressBar },
-			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
-}
+
+// Payload Preview ===============
+
+const payloadViewerTitleRef = useRef()
+const payloadViewerRef = useRef()
 
 function PayloadViewer() {
 	return (
 		r('div', { className: CSS.PayloadViewer },
-			r('h2', { ref: refPayloadViewerFileTitle }, Strings.mock),
+			r('h2', { ref: payloadViewerTitleRef }, Strings.mock),
 			r('pre', null,
-				r('code', { ref: refPayloadViewer }, Strings.click_link_to_preview))))
+				r('code', { ref: payloadViewerRef }, Strings.click_link_to_preview))))
+}
+
+function PayloadViewerProgressBar() {
+	return (
+		r('div', { className: CSS.ProgressBar },
+			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
 }
 
 function PayloadViewerTitle({ file }) {
@@ -381,27 +382,38 @@ function PayloadViewerTitle({ file }) {
 			'.' + ext))
 }
 
-async function updatePayloadViewer(method, urlMask, imgSrc, response) {
-	empty(refPayloadViewerFileTitle.current)
-	refPayloadViewerFileTitle.current.append(PayloadViewerTitle({
-		file: mockSelectorFor(method, urlMask).value
-	}))
+async function previewMock(method, urlMask, href) {
+	const timer = setTimeout(renderProgressBar, 180)
+	const response = await fetch(href, { method })
+	clearTimeout(timer)
+	await updatePayloadViewer(method, urlMask, response)
+
+	function renderProgressBar() {
+		payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
+	}
+}
+
+async function updatePayloadViewer(method, urlMask, response) {
+	payloadViewerTitleRef.current.replaceChildren(
+		PayloadViewerTitle({ file: mockSelectorFor(method, urlMask).value }))
 
 	const mime = response.headers.get('content-type') || ''
-	if (mime.startsWith('image/')) // naively assumes GET.200
-		renderPayloadImage(imgSrc) // TESTME in pixaton
-	else
-		renderPayloadBody(await response.text() || Strings.empty_response_body, mime)
-
-	function renderPayloadImage(src) {
-		empty(refPayloadViewer.current)
-		refPayloadViewer.current.append(r('img', { src }))
+	if (mime.startsWith('image/')) { // Naively assumes GET.200
+		payloadViewerRef.current.replaceChildren(
+			r('img', {
+				src: URL.createObjectURL(await response.blob())
+			}))
 	}
-	function renderPayloadBody(body, mime) {
-		if (mime === 'application/json' && window.Prism?.highlight && window.Prism?.languages)
-			refPayloadViewer.current.innerHTML = window.Prism.highlight(body, window.Prism.languages.json, 'json')
-		else
-			refPayloadViewer.current.innerText = body
+	else {
+		const body = await response.text() || Strings.empty_response_body
+		if (mime === 'application/json') {
+			const hBody = syntaxHighlightJson(body)
+			if (hBody) {
+				payloadViewerRef.current.innerHTML = hBody
+				return
+			}
+		}
+		payloadViewerRef.current.innerText = body
 	}
 }
 
@@ -427,11 +439,11 @@ function StaticFilesList({ staticFiles }) {
 	if (!staticFiles.length)
 		return null
 	return (
-		r('details', {
+		r('section', {
 				open: true,
 				className: CSS.StaticFilesList
 			},
-			r('summary', null, Strings.static),
+			r('h2', null, Strings.static_get),
 			r('ul', null, staticFiles.map(f =>
 				r('li', null,
 					r('a', { href: f, target: '_blank' }, f))))))
@@ -453,11 +465,6 @@ function cssClass(...args) {
 	return args.filter(a => a).join(' ')
 }
 
-function empty(node) {
-	while (node.firstChild)
-		node.removeChild(node.firstChild)
-}
-
 
 // These are simplified React-compatible implementations.
 // IOW, for switching to React, remove the `createRoot`, `createElement`, `useRef`

package/src/Filename.js

@@ -20,6 +20,7 @@ export function filenameIsValid(file) {
 	return !error
 }
 
+// TODO ThinkAbout 206 (reject, handle, or send in full?)
 function validateFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')
 	if (tokens.length < 4)

package/src/MockDispatcher.js

@@ -20,7 +20,7 @@ export async function dispatchMock(req, response) {
 			return
 		}
 
-		console.log(decodeURIComponent(req.url), ' → ', broker.file)
+		console.log('%s → %s', decodeURIComponent(req.url), broker.file)
 		response.statusCode = broker.status
 
 		if (cookie.getCurrent())

package/src/Mockaton.js

@@ -12,6 +12,8 @@ import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
 
 
+process.on('unhandledRejection', error => { throw error })
+
 export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
@@ -21,7 +23,7 @@ export function Mockaton(options) {
 			if (!file)
 				return
 			if (existsSync(join(config.mocksDir, file)))
-				mockBrokerCollection.registerMock(file, 'ensureItHas500')
+				mockBrokerCollection.registerMock(file, 'isFromWatcher')
 			else
 				mockBrokerCollection.unregisterMock(file)
 		})
@@ -39,6 +41,8 @@ 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)

package/src/Mockaton.test.js

@@ -5,7 +5,7 @@ import { createServer } from 'node:http'
 import { dirname, join } from 'node:path'
 import { randomUUID } from 'node:crypto'
 import { equal, deepEqual, match } from 'node:assert/strict'
-import { writeFileSync, mkdtempSync, mkdirSync, unlinkSync } from 'node:fs'
+import { writeFileSync, mkdtempSync, mkdirSync, unlinkSync, readFileSync } from 'node:fs'
 
 import { config } from './config.js'
 import { mimeFor } from './utils/mime.js'
@@ -14,7 +14,7 @@ import { readBody } from './utils/http-request.js'
 import { Commander } from './Commander.js'
 import { CorsHeader } from './utils/http-cors.js'
 import { parseFilename } from './Filename.js'
-import { listFilesRecursively, read } from './utils/fs.js'
+import { listFilesRecursively } from './utils/fs.js'
 import { API, DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
 
 
@@ -351,7 +351,7 @@ async function testRegistering() {
 				fixtureForRegisteringPutA500[1]
 			])
 			deepEqual(currentMock, {
-				file: fixtureForRegisteringPutA500[1],
+				file: fixtureForRegisteringPutA[1],
 				delay: 0
 			})
 		})
@@ -409,6 +409,7 @@ async function testItUpdatesRouteDelay(url, file, expectedBody) {
 	await describe('url: ' + url, () => {
 		it('body is: ' + expectedBody, () => equal(body, JSON.stringify(expectedBody)))
 		it('delay', () => equal((new Date()).getTime() - now.getTime() > config.delay, true))
+		// TODO flaky test ^
 	})
 }
 
@@ -416,7 +417,7 @@ async function testBadRequestWhenUpdatingNonExistingMockAlternative() {
 	await it('There are mocks for /api/the-route but not this one', async () => {
 		const missingFile = 'api/the-route(non-existing-variant).GET.200.json'
 		const res = await commander.select(missingFile)
-		equal(res.status, 400)
+		equal(res.status, 422)
 		equal(await res.text(), `Missing Mock: ${missingFile}`)
 	})
 }
@@ -549,7 +550,7 @@ async function testEnableFallbackSoRoutesWithoutMocksGetRelayed() {
 		const fallbackServer = createServer(async (req, response) => {
 			response.writeHead(423, {
 				'custom_header': 'my_custom_header',
-				'content-type': mimeFor('txt'),
+				'content-type': mimeFor('.txt'),
 				'set-cookie': [
 					'cookieA=A',
 					'cookieB=B'
@@ -573,7 +574,7 @@ async function testEnableFallbackSoRoutesWithoutMocksGetRelayed() {
 			equal(res.headers.get('set-cookie'), ['cookieA=A', 'cookieB=B'].join(', '))
 			equal(await res.text(), reqBodyPayload)
 
-			const savedBody = read(join(tmpDir, 'api/non-existing-mock/[id].POST.423.txt'))
+			const savedBody = readFileSync(join(tmpDir, 'api/non-existing-mock/[id].POST.423.txt'), 'utf8')
 			equal(savedBody, reqBodyPayload)
 
 			fallbackServer.close()

package/src/StaticDispatcher.js

@@ -1,12 +1,17 @@
-import { join } from 'node:path'
+import { join, isAbsolute } from 'node:path'
+import fs, { readFileSync } from 'node:fs'
+
 import { config } from './config.js'
+import { mimeFor } from './utils/mime.js'
 import { isDirectory, isFile } from './utils/fs.js'
-import { sendFile, sendPartialContent, sendNotFound } from './utils/http-response.js'
+import { sendNotFound, sendInternalServerError } from './utils/http-response.js'
 
 
 export function isStatic(req) {
 	if (!config.staticDir)
 		return false
+	if (!isAbsolute(req.url)) // prevent sandbox escape
+		return false
 	const f = resolvePath(req.url)
 	return !config.ignore.test(f) && Boolean(f)
 }
@@ -29,4 +34,41 @@ function resolvePath(url) {
 		return candidate
 }
 
+function sendFile(response, file) {
+	if (!isFile(file))
+		sendNotFound(response)
+	else {
+		response.setHeader('Content-Type', mimeFor(file))
+		response.end(readFileSync(file, 'utf8'))
+	}
+}
+
+async function sendPartialContent(response, range, file) {
+	const { size } = await fs.promises.lstat(file)
+	let [start, end] = range.replace(/bytes=/, '').split('-').map(n => parseInt(n, 10))
+	if (isNaN(end)) end = size - 1
+	if (isNaN(start)) start = size - end
+
+	if (start < 0 || start > end || start >= size || end >= size) {
+		response.statusCode = 416 // Range Not Satisfiable
+		response.setHeader('Content-Range', `bytes */${size}`)
+		response.end()
+	}
+	else {
+		response.statusCode = 206 // Partial Content
+		response.setHeader('Accept-Ranges', 'bytes')
+		response.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
+		response.setHeader('Content-Type', mimeFor(file))
+		const reader = fs.createReadStream(file, { start, end })
+		reader.on('open', function () {
+			this.pipe(response)
+		})
+		reader.on('error', function (error) {
+			sendInternalServerError(response, error)
+		})
+	}
+}
+
+
+
 

package/src/mockBrokersCollection.js

@@ -35,7 +35,7 @@ export function init() {
 	})
 }
 
-export function registerMock(file, shouldEnsure500) {
+export function registerMock(file, isFromWatcher) {
 	if (getBrokerByFilename(file)?.hasMock(file)
 		|| config.ignore.test(file)
 		|| !filenameIsValid(file))
@@ -48,8 +48,11 @@ export function registerMock(file, shouldEnsure500) {
 	else
 		collection[method][urlMask].register(file)
 
-	if (shouldEnsure500)
+	if (isFromWatcher) {
+		if (!this.file)
+			collection[method][urlMask].selectDefaultFile()
 		collection[method][urlMask].ensureItHas500()
+	}
 }
 
 export function unregisterMock(file) {

package/src/utils/fs.js

@@ -1,12 +1,10 @@
 import { join, dirname, sep, posix } from 'node:path'
-import { lstatSync, readFileSync, readdirSync, writeFileSync, mkdirSync } from 'node:fs'
+import { lstatSync, readdirSync, writeFileSync, mkdirSync } from 'node:fs'
 
 
 export const isFile = path => lstatSync(path, { throwIfNoEntry: false })?.isFile()
 export const isDirectory = path => lstatSync(path, { throwIfNoEntry: false })?.isDirectory()
 
-export const read = path => readFileSync(path, 'utf8')
-
 /** @returns {Array<string>} paths relative to `dir` */
 export const listFilesRecursively = dir => {
 	const files = readdirSync(dir, { recursive: true }).filter(f => isFile(join(dir, f)))

package/src/utils/http-cors.test.js

@@ -40,7 +40,7 @@ await describe('CORS', async () => {
 
 	await describe('Identifies Preflight Requests', async () => {
 		const requiredRequestHeaders = {
-			[CH.Origin]: 'http://locahost:9999',
+			[CH.Origin]: 'http://localhost:9999',
 			[CH.AccessControlRequestMethod]: 'POST'
 		}
 

package/src/utils/http-response.js

@@ -1,6 +1,5 @@
-import fs from 'node:fs'
+import { readFileSync } from 'node:fs'
 import { mimeFor } from './mime.js'
-import { isFile, read } from './fs.js'
 
 
 export function sendOK(response) {
@@ -17,46 +16,20 @@ export function sendJSON(response, payload) {
 	response.end(JSON.stringify(payload))
 }
 
-export function sendFile(response, filePath) {
-	if (!isFile(filePath))
-		sendNotFound(response)
-	else {
-		response.setHeader('Content-Type', mimeFor(filePath))
-		response.end(read(filePath))
-	}
+export function sendForbidden(response) {
+	response.statusCode = 403
+	response.end()
 }
 
-export async function sendPartialContent(response, range, file) {
-	const { size } = await fs.promises.lstat(file)
-	let [start, end] = range.replace(/bytes=/, '').split('-').map(n => parseInt(n, 10))
-	if (isNaN(end)) end = size - 1
-	if (isNaN(start)) start = size - end
-
-	if (start < 0 || start > end || start >= size || end >= size) {
-		response.statusCode = 416 // Range Not Satisfiable
-		response.setHeader('Content-Range', `bytes */${size}`)
-		response.end()
-	}
-	else {
-		response.statusCode = 206 // Partial Content
-		response.setHeader('Accept-Ranges', 'bytes')
-		response.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
-		response.setHeader('Content-Type', mimeFor(file))
-		const reader = fs.createReadStream(file, { start, end })
-		reader.on('open', function () {
-			this.pipe(response)
-		})
-		reader.on('error', function (error) {
-			sendInternalServerError(response, error)
-		})
-	}
+export function sendDashboardFile(response, file) {
+	response.setHeader('Content-Type', mimeFor(file))
+	response.end(readFileSync(file, 'utf8'))
 }
 
-
 export function sendBadRequest(response, error) {
 	console.error(error)
 	response.statusCode = 400
-	response.end(error)
+	response.end()
 }
 
 export function sendNotFound(response) {
@@ -73,5 +46,5 @@ export function sendUnprocessableContent(response, error) {
 export function sendInternalServerError(response, error) {
 	console.error(error)
 	response.statusCode = 500
-	response.end(error?.code || '')
+	response.end()
 }

package/src/utils/mime.js

@@ -88,16 +88,22 @@ const mimes = {
 }
 
 export function mimeFor(filename) {
-	const ext = filename.replace(/.*\./, '').toLowerCase()
+	const ext = extname(filename).toLowerCase()
 	return config.extraMimes[ext] || mimes[ext] || ''
 }
+function extname(filename) {
+	const i = filename.lastIndexOf('.')
+	return i >= 0
+		? filename.substring(i + 1)
+		: ''
+}
+
 
 export function extFor(mime) {
 	return mime
 		? findExt(mime)
 		: 'empty'
 }
-
 function findExt(targetMime) {
 	for (const [ext, mime] of Object.entries(config.extraMimes))
 		if (targetMime === mime)