npm - mockaton - Versions diffs - 12.6.0 → 12.7.0 - Mend

mockaton 12.6.0 → 12.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/index.d.ts +1 -0
package/index.js +2 -1
package/package.json +1 -1
package/src/client/ApiCommander.js +3 -0
package/src/client/ApiConstants.js +4 -1
package/src/client/IndexHtml.js +32 -0
package/src/client/app-store.js +64 -64
package/src/client/app.css +53 -24
package/src/client/app.js +40 -8
package/src/client/dom-utils.js +1 -2
package/src/client/payload-viewer.js +5 -3
package/src/server/Api.js +20 -3
package/src/server/MockDispatcher.js +2 -18
package/src/server/MockDispatcherPlugins.js +22 -0
package/src/server/Mockaton.test.config.js +17 -0
package/src/server/Mockaton.test.js +109 -84
package/src/server/Watcher.js +19 -2
package/src/server/WatcherDevClient.js +1 -1
package/src/server/cli.js +3 -0
package/src/server/cli.test.js +39 -0
package/src/server/config.js +2 -1
package/src/server/utils/mime.js +5 -8
package/src/server/utils/mime.test.js +1 -8
package/src/client/indexHtml.js +0 -31

package/index.d.ts CHANGED Viewed

@@ -54,6 +54,7 @@ export function Mockaton(options: Partial<Config>): Promise<Server | undefined>
 export function defineConfig(options: Partial<Config>): Partial<Config>
 export const jsToJsonPlugin: Plugin
+export const echoFilePlugin: Plugin
 // Utils

package/index.js CHANGED Viewed

@@ -1,8 +1,9 @@
 export { Commander } from './src/client/ApiCommander.js'
+export { API } from './src/client/ApiConstants.js'
 export { Mockaton } from './src/server/Mockaton.js'
 export { jwtCookie } from './src/server/utils/jwt.js'
-export { jsToJsonPlugin } from './src/server/MockDispatcher.js'
+export { jsToJsonPlugin, echoFilePlugin } from './src/server/MockDispatcherPlugins.js'
 export { parseJSON, BodyReaderError } from './src/server/utils/HttpIncomingMessage.js'
 export { parseSplats, parseQueryParams } from './src/server/utils/UrlParsers.js'

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "12.6.0",
+	"version": "12.7.0",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/ApiCommander.js CHANGED Viewed

@@ -30,6 +30,9 @@ export class Commander {
 	/** @returns {Promise<Response>} */
 	setCorsAllowed = value => this.#patch(API.cors, value)
+	/** @returns {Promise<Response>} */
+	setWatchMocks = enabled => this.#patch(API.watchMocks, enabled)
 	/** @returns {Promise<Response>} */
 	setProxyFallback = proxyAddr => this.#patch(API.fallback, proxyAddr)

package/src/client/ApiConstants.js CHANGED Viewed

@@ -23,11 +23,14 @@ export const API = {
 	throws: MOUNT + '/throws',
 	toggle500: MOUNT + '/toggle500',
 	watchHotReload: MOUNT + '/watch-hot-reload',
+	watchMocks: MOUNT + '/watch-mocks',
 }
 export const HEADER_502 = 'Mockaton502'
 export const HEADER_SYNC_VERSION = 'sync_version'
 export const DEFAULT_MOCK_COMMENT = '(default)'
-export const UNKNOWN_MIME_EXT = 'unknown'
 export const LONG_POLL_SERVER_TIMEOUT = 8_000
+export const EXT_UNKNOWN_MIME = 'unknown'
+export const EXT_EMPTY = 'empty'

package/src/client/IndexHtml.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { API } from './ApiConstants.js'
+export const CSP = [
+	`default-src 'self'`,
+	`img-src data: blob: 'self'`
+].join(';')
+// language=html
+export const IndexHtml = (hotReloadEnabled, version) =>
+	`
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<meta charset="UTF-8">
+	<base href="${API.dashboard}/">
+	<script type="module" src="app.js"></script>
+	<link rel="preload" href="${API.state}" as="fetch" crossorigin>
+	<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="HTTP Mock Server">
+	<title>Mockaton v${version}</title>
+</head>
+<body>
+${hotReloadEnabled
+		? '<script type="module" src="watcherDev.js"></script>'
+		: ''}
+</body>
+</html>
+`.trim()

package/src/client/app-store.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Commander } from './ApiCommander.js'
 import { parseFilename, extractComments } from './Filename.js'
+import { EXT_UNKNOWN_MIME, EXT_EMPTY } from './ApiConstants.js'
 export const t = translation => translation[0]
@@ -25,84 +26,85 @@ export const store = {
 		return Boolean(store.proxyFallback)
 	},
+	groupByMethod: initPreference('groupByMethod'),
+	toggleGroupByMethod() {
+		store.groupByMethod = !store.groupByMethod
+		togglePreference('groupByMethod', store.groupByMethod)
+		store.render()
+	},
+	chosenLink: { method: '', urlMask: '' },
+	setChosenLink(method, urlMask) {
+		store.chosenLink = { method, urlMask }
+	},
+	get hasChosenLink() {
+		return store.chosenLink.method && store.chosenLink.urlMask
+	},
 	getSyncVersion: api.getSyncVersion,
-	_action(action, onSuccess) {
+	_request(action, onSuccess) {
 		Promise.try(async () => {
 			const response = await action()
-			if (!response.ok) throw response
-			return response
+			if (response.ok) return response
+			throw response
 		})
 			.then(onSuccess)
 			.catch(store.onError)
 	},
-	async fetchState() {
-		store._action(api.getState, async response => {
+	fetchState() {
+		store._request(api.getState, async response => {
 			Object.assign(store, await response.json())
 			if (store.showProxyField === null) // isFirstCall
 				store.showProxyField = Boolean(store.proxyFallback)
 			store.render()
 		})
 	},
-	groupByMethod: initPreference('groupByMethod'),
-	toggleGroupByMethod() {
-		store.groupByMethod = !store.groupByMethod
-		togglePreference('groupByMethod', store.groupByMethod)
-		store.render()
-	},
-	chosenLink: { method: '', urlMask: '' },
-	setChosenLink(method, urlMask) {
-		store.chosenLink = { method, urlMask }
-	},
-	get hasChosenLink() {
-		return store.chosenLink.method && store.chosenLink.urlMask
-	},
-	async reset() {
-		store._action(api.reset, () => {
+	reset() {
+		store._request(api.reset, () => {
 			store.setChosenLink('', '')
 			store.fetchState()
 		})
 	},
-	async bulkSelectByComment(value) {
-		store._action(() => api.bulkSelectByComment(value),
-			store.fetchState)
+	bulkSelectByComment(value) {
+		store._request(() => api.bulkSelectByComment(value), () => {
+			store.fetchState()
+		})
 	},
-	async setGlobalDelay(value) {
-		store._action(() => api.setGlobalDelay(value), () => {
+	setGlobalDelay(value) {
+		store._request(() => api.setGlobalDelay(value), () => {
 			store.delay = value
 		})
 	},
-	async setGlobalDelayJitter(value) {
-		store._action(() => api.setGlobalDelayJitter(value), () => {
+	setGlobalDelayJitter(value) {
+		store._request(() => api.setGlobalDelayJitter(value), () => {
 			store.delayJitter = value
 		})
 	},
-	async selectCookie(name) {
-		store._action(() => api.selectCookie(name), async response => {
+	selectCookie(name) {
+		store._request(() => api.selectCookie(name), async response => {
 			store.cookies = await response.json()
 		})
 	},
-	async setProxyFallback(value) {
-		store._action(() => api.setProxyFallback(value), () => {
+	setProxyFallback(value) {
+		store._request(() => api.setProxyFallback(value), () => {
 			store.proxyFallback = value
 			store.render()
 		})
 	},
-	async setCollectProxied(checked) {
-		store._action(() => api.setCollectProxied(checked), () => {
+	setCollectProxied(checked) {
+		store._request(() => api.setCollectProxied(checked), () => {
 			store.collectProxied = checked
 		})
 	},
@@ -166,8 +168,8 @@ export const store = {
 		store.renderRow(method, urlMask)
 	},
-	async selectFile(file) {
-		store._action(() => api.select(file), async response => {
+	selectFile(file) {
+		store._request(() => api.select(file), async response => {
 			const { method, urlMask } = parseFilename(file)
 			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
@@ -175,36 +177,36 @@ export const store = {
 		})
 	},
-	async toggle500(method, urlMask) {
-		store._action(() => api.toggle500(method, urlMask), async response => {
+	toggle500(method, urlMask) {
+		store._request(() => api.toggle500(method, urlMask), async response => {
 			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
 		})
 	},
-	async setProxied(method, urlMask, checked) {
-		store._action(() => api.setRouteIsProxied(method, urlMask, checked), async response => {
+	setProxied(method, urlMask, checked) {
+		store._request(() => api.setRouteIsProxied(method, urlMask, checked), async response => {
 			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
 		})
 	},
-	async setDelayed(method, urlMask, checked) {
-		store._action(() => api.setRouteIsDelayed(method, urlMask, checked), async response => {
+	setDelayed(method, urlMask, checked) {
+		store._request(() => api.setRouteIsDelayed(method, urlMask, checked), async response => {
 			store.setBroker(await response.json())
 		})
 	},
-	async setDelayedStatic(route, checked) {
-		store._action(() => api.setStaticRouteIsDelayed(route, checked), () => {
+	setDelayedStatic(route, checked) {
+		store._request(() => api.setStaticRouteIsDelayed(route, checked), () => {
 			store.staticBrokers[route].delayed = checked
 		})
 	},
-	async setStaticRouteStatus(route, status) {
-		store._action(() => api.setStaticRouteStatus(route, status), () => {
+	setStaticRouteStatus(route, status) {
+		store._request(() => api.setStaticRouteStatus(route, status), () => {
 			store.staticBrokers[route].status = status
 		})
 	}
@@ -250,26 +252,24 @@ function togglePreference(param, nextVal) {
  * @param {string[]} paths - sorted
  */
 export function dittoSplitPaths(paths) {
-	const result = [['', paths[0]]]
-	const pathsInParts = paths.map(p => p.split('/').filter(Boolean))
-	for (let i = 1; i < paths.length; i++) {
-		const prev = pathsInParts[i - 1]
-		const curr = pathsInParts[i]
+	const pParts = paths.map(p => p.split('/').filter(Boolean))
+	return paths.map((p, i) => {
+		if (i === 0)
+			return ['', p]
+		const prev = pParts[i - 1]
+		const curr = pParts[i]
 		const min = Math.min(curr.length, prev.length)
 		let j = 0
 		while (j < min && curr[j] === prev[j])
 			j++
 		if (!j) // no common dirs
-			result.push(['', paths[i]])
-		else {
-			const ditto = '/' + curr.slice(0, j).join('/') + '/'
-			result.push([ditto, paths[i].slice(ditto.length)])
-		}
-	}
-	return result
+			return ['', p]
+		const ditto = '/' + curr.slice(0, j).join('/') + '/'
+		return [ditto, p.slice(ditto.length)]
+	})
 }
@@ -343,7 +343,7 @@ export class BrokerRowModel {
 		const { status, ext } = parseFilename(file)
 		return [
 			status,
-			ext === 'empty' || ext === 'unknown' ? '' : ext,
+			ext === EXT_EMPTY || ext === EXT_UNKNOWN_MIME ? '' : ext,
 			extractComments(file).join(' ')
 		].filter(Boolean).join(' ')
 	}

package/src/client/app.css CHANGED Viewed

@@ -1,11 +1,12 @@
 :root {
 	color-scheme: light dark;
 	--colorBackground: light-dark(#fff, #181818);
-	--colorComboBoxHeaderBackground: light-dark(#fff, #222);
+	--colorInputBackground: light-dark(#fff, #222);
 	--colorSecondaryButtonBackground: light-dark(#fcfcfc, #2c2c2c);
 	--colorHeaderBackground: light-dark(#f2f2f3, #141414);
 	--colorComboBoxBackground: light-dark(#eee, #2a2a2a);
-	--colorBorder: light-dark(#e0e0e0, #333);
+	--colorBorder: light-dark(#e0e0e0, #323232);
+	--colorBorderActive: light-dark(#c8c8c8, #3c3c3c);
 	--colorSecondaryAction: light-dark(#666, #aaa);
 	--colorLabel: light-dark(#555, #aaa);
 	--colorDisabledMockSelector: light-dark(#444, #a9b9b9);
@@ -17,7 +18,7 @@
 	--colorPurple: light-dark(#9b71e8, #ae81ff);
 	--colorGreen: light-dark(#388e3c, #a6e22e);
 	--color4xxBackground: light-dark(#ffedd1, #68554a);
 	accent-color: var(--colorAccent);
 	--radius: 16px;
 }
@@ -115,10 +116,6 @@ header {
 			opacity: 1;
 		}
-		@media (max-width: 740px) {
-			display: none;
-		}
 		svg {
 			width: 120px;
 			pointer-events: none;
@@ -126,6 +123,20 @@ header {
 		}
 	}
+	@media (max-width: 570px) {
+		.Logo {
+			display: none;
+		}
+	}
+	&:has(.FallbackBackend) {
+		@media (max-width: 740px) {
+			.Logo {
+				display: none;
+			}
+		}
+	}
 	> div {
 		display: flex;
 		width: 100%;
@@ -133,9 +144,11 @@ header {
 		align-items: flex-end;
 		gap: 16px 12px;
-		@media (max-width: 600px) {
-			.HelpLink {
-				margin-left: unset;
+		&:has(.FallbackBackend) {
+			@media (max-width: 600px) {
+				.HelpLink {
+					margin-left: unset;
+				}
 			}
 		}
 	}
@@ -209,7 +222,7 @@ header {
 		margin-top: 2px;
 		color: var(--colorText);
 		font-size: 11px;
-		background-color: var(--colorComboBoxHeaderBackground);
+		background-color: var(--colorInputBackground);
 		border-radius: var(--radius);
 	}
@@ -301,14 +314,14 @@ main {
 		}
 		.leftSide {
-			width: 100% !important;
+			width: 100% !important; /* because it's resizable in js */
 			height: 50%;
 			border-right: 0;
 		}
 	}
 	.leftSide {
-		width: 50%; /* resizable in js */
+		width: 50%;
 		border-top: 1px solid var(--colorBorder);
 		border-right: 1px solid var(--colorBorder);
 	}
@@ -323,14 +336,31 @@ main {
 		.Resizer {
 			position: absolute;
 			top: 0;
-			left: 0;
+			left: -1px;
 			width: 8px;
 			height: 100%;
-			border-left: 3px solid transparent;
+			border-left: 1px solid transparent;
 			cursor: col-resize;
+			&:hover,
 			&:active {
-				border-color: var(--colorBorder);
+				border-color: var(--colorBorderActive);
+			}
+			&::before,
+			&::after {
+				position: absolute;
+				left: -2px;
+				content: '';
+			}
+			&::before {
+				top: calc(50% + 6px);
+				height: 22px;
+				border-left: 3px solid var(--colorBackground);
+			}
+			&::after {
+				top: calc(50% + 10px);
+				height: 14px;
+				border-left: 3px dotted var(--colorBorder);
 			}
 		}
 	}
@@ -364,7 +394,7 @@ main {
 		text-align-last: center;
 		color: var(--colorText);
 		font-size: 11px;
-		background-color: var(--colorComboBoxHeaderBackground);
+		background-color: var(--colorInputBackground);
 		border-radius: var(--radius);
 	}
 }
@@ -622,7 +652,7 @@ main {
 	left: -16px;
 	width: calc(100% + 32px);
 	height: 2px;
-	background: var(--colorComboBoxHeaderBackground);
+	background: var(--colorInputBackground);
 	> div {
 		position: absolute;
@@ -651,6 +681,7 @@ main {
 	bottom: 12px;
 	left: 12px;
 	padding: 12px 16px;
+	padding-right: 42px;
 	cursor: pointer;
 	background: var(--colorRed);
 	color: white;
@@ -659,18 +690,16 @@ main {
 	transform: translateY(20px);
 	animation: _kfToastIn 240ms forwards;
-	&:hover::after {
+	&::after {
 		position: absolute;
 		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
+		right: 16px;
+		width: 12px;
+		height: 12px;
 		text-align: center;
 		content: '×';
 		font-size: 28px;
 		line-height: 34px;
-		border-radius: var(--radius);
-		background: rgba(0, 0, 0, 0.5);
 	}
 }
 @keyframes _kfToastIn {

package/src/client/app.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import {
 	createElement as r,
 	createSvgElement as s,
-	t, classNames, restoreFocus, Fragment, adoptCSS
+	t, classNames, restoreFocus, Fragment, defineClassNames
 } from './dom-utils.js'
 import { store } from './app-store.js'
 import { PayloadViewer, previewMock } from './payload-viewer.js'
 import CSS from './app.css' with { type: 'css' }
-adoptCSS(CSS)
+document.adoptedStyleSheets.push(CSS)
+defineClassNames(CSS)
 store.onError = onError
@@ -480,13 +481,38 @@ function DelayToggler({ checked, commit, optClassName }) {
 function ClickDragToggler({ checked, commit, className, title, body }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
-			onPointerDown.call(this)
+			onPointerDown.call(this, event)
 	}
-	function onPointerDown() {
+	function onPointerDown(event) {
+		if (event.altKey) {
+			onExclusiveClick.call(this)
+			return
+		}
 		this.checked = !this.checked
 		this.focus()
 		commit(this.checked)
 	}
+	function onExclusiveClick() {
+		const selector = selectorForColumnOf(this)
+		if (!selector)
+			return
+		// Uncheck all other in the column.
+		for (const elem of leftSideRef.elem.querySelectorAll(selector))
+			if (elem !== this && elem.checked && !elem.disabled) {
+				elem.checked = false
+				elem.dispatchEvent(new Event('change'))
+			}
+		if (!this.checked) {
+			this.checked = true
+			this.dispatchEvent(new Event('change'))
+		}
+		this.focus()
+	}
 	function onClick(event) {
 		if (event.pointerType === 'mouse')
 			event.preventDefault()
@@ -666,18 +692,24 @@ function initRealTimeUpdates() {
 	}
 }
+function selectorForColumnOf(elem) {
+	return columnSelectors().find(s => elem?.matches(s))
+}
-function initKeyboardNavigation() {
-	const columnSelectors = [
+function columnSelectors() {
+	return [
 		`.${CSS.TableRow} .${CSS.ProxyToggler} input`,
 		`.${CSS.TableRow} .${CSS.DelayToggler} input`,
 		`.${CSS.TableRow} .${CSS.StatusCodeToggler} input`,
 		`.${CSS.TableRow} .${CSS.PreviewLink}`,
 		// No .MockSelector because down/up arrows have native behavior on them
 	]
+}
+function initKeyboardNavigation() {
 	const rowSelectors = [
-		...columnSelectors,
+		...columnSelectors(),
 		`.${CSS.TableRow} .${CSS.MockSelector}:enabled`,
 	]
@@ -686,7 +718,7 @@ function initKeyboardNavigation() {
 			case 'ArrowDown':
 			case 'ArrowUp': {
 				const pivot = document.activeElement
-				const sel = columnSelectors.find(s => pivot?.matches(s))
+				const sel = selectorForColumnOf(pivot)
 				if (sel) {
 					const offset = key === 'ArrowDown' ? +1 : -1
 					const siblings = leftSideRef.elem.querySelectorAll(sel)

package/src/client/dom-utils.js CHANGED Viewed

@@ -72,8 +72,7 @@ function selectorFor(elem) {
 }
-export function adoptCSS(sheet) {
-	document.adoptedStyleSheets.push(sheet)
+export function defineClassNames(sheet) {
 	Object.assign(sheet, extractClassNames(sheet))
 }

package/src/client/payload-viewer.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import {
 	createElement as r,
-	t, classNames, adoptCSS
+	t, classNames, defineClassNames
 } from './dom-utils.js'
 import { parseFilename } from './Filename.js'
 import { HEADER_502 } from './ApiConstants.js'
 import { store } from './app-store.js'
 import CSS from './app.css' with { type: 'css' }
-adoptCSS(CSS)
+defineClassNames(CSS)
 const payloadViewerTitleRef = {}
@@ -84,7 +84,9 @@ export async function previewMock() {
 		if (proxied || file)
 			await updatePayloadViewer(proxied, file, response)
 	}
-	catch {
+	catch (error) {
+		clearTimeout(spinnerTimer)
+		store.onError(error)
 		payloadViewerCodeRef.elem.replaceChildren()
 	}
 }

package/src/server/Api.js CHANGED Viewed

@@ -10,12 +10,12 @@ import {
 	DASHBOARD_ASSETS,
 	CLIENT_DIR
 } from './WatcherDevClient.js'
-import { longPollClientSyncVersion } from './Watcher.js'
+import { longPollClientSyncVersion, startWatchers, stopWatchers } from './Watcher.js'
 import pkgJSON from '../../package.json' with { type: 'json' }
 import { API } from '../client/ApiConstants.js'
-import { IndexHtml, CSP } from '../client/indexHtml.js'
+import { IndexHtml, CSP } from '../client/IndexHtml.js'
 import { cookie } from './cookie.js'
 import { config, ConfigValidator } from './config.js'
@@ -54,7 +54,9 @@ export const apiPatchReqs = new Map([
 	[API.toggle500, toggleRoute500],
 	[API.delayStatic, setStaticRouteIsDelayed],
-	[API.staticStatus, setStaticRouteStatusCode]
+	[API.staticStatus, setStaticRouteStatusCode],
+	[API.watchMocks, setWatchMocks]
 ])
@@ -109,6 +111,21 @@ async function setCorsAllowed(req, response) {
 }
+async function setWatchMocks(req, response) {
+	const enabled = await req.json()
+	if (typeof enabled !== 'boolean')
+		response.unprocessable(`Expected boolean for "watchMocks"`)
+	else {
+		if (enabled)
+			startWatchers()
+		else
+			stopWatchers()
+		response.ok()
+	}
+}
 async function setGlobalDelay(req, response) {
 	const delay = await req.json()

package/src/server/MockDispatcher.js CHANGED Viewed

@@ -1,12 +1,10 @@
 import { join } from 'node:path'
-import { readFileSync } from 'node:fs'
-import { pathToFileURL } from 'node:url'
 import { logger } from './utils/logger.js'
-import { mimeFor } from './utils/mime.js'
 import { proxy } from './ProxyRelay.js'
 import { cookie } from './cookie.js'
+import { echoFilePlugin } from './MockDispatcherPlugins.js'
 import { brokerByRoute } from './mockBrokersCollection.js'
 import { config, calcDelay } from './config.js'
@@ -61,21 +59,7 @@ async function applyPlugins(filePath, req, response) {
 	for (const [regex, plugin] of config.plugins)
 		if (regex.test(filePath))
 			return await plugin(filePath, req, response)
-	return {
-		mime: mimeFor(filePath),
-		body: readFileSync(filePath)
-	}
-}
-export async function jsToJsonPlugin(filePath, req, response) {
-	const jsExport = (await import(pathToFileURL(filePath))).default
-	const body = typeof jsExport === 'function'
-		? await jsExport(req, response)
-		: JSON.stringify(jsExport, null, 2)
-	return {
-		mime: response.getHeader('Content-Type') || mimeFor('.json'), // jsFunc are allowed to set it
-		body
-	}
+	return echoFilePlugin(filePath)
 }
 function length(body) {

package/src/server/MockDispatcherPlugins.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs'
+import { pathToFileURL } from 'node:url'
+import { mimeFor } from './utils/mime.js'
+export function echoFilePlugin(filePath) {
+	return {
+		mime: mimeFor(filePath),
+		body: readFileSync(filePath)
+	}
+}
+export async function jsToJsonPlugin(filePath, req, response) {
+	const jsExport = (await import(pathToFileURL(filePath))).default
+	const body = typeof jsExport === 'function'
+		? await jsExport(req, response)
+		: JSON.stringify(jsExport, null, 2)
+	return {
+		mime: response.getHeader('Content-Type') || mimeFor('.json'), // js functions are allowed to set it
+		body
+	}
+}

package/src/server/Mockaton.test.config.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { jwtCookie } from '../../index.js'
+export default {
+	cookies: {
+		userA: 'CookieA',
+		userB: jwtCookie('CookieB', { email: 'john@example.test' }),
+	},
+	extraHeaders: ['custom_header_name', 'custom_header_val'],
+	extraMimes: {
+		['custom_extension']: 'custom_mime'
+	},
+	logLevel: 'verbose',
+	corsOrigins: ['https://example.test'],
+	corsExposedHeaders: ['Content-Encoding'],
+	watcherEnabled: false, // But we enable it at run-time
+	watcherDebounceMs: 0
+}

package/src/server/Mockaton.test.js CHANGED Viewed

@@ -1,64 +1,57 @@
 import { join } from 'node:path'
+import { spawn } from 'node:child_process'
 import { tmpdir } from 'node:os'
 import { promisify } from 'node:util'
 import { createServer } from 'node:http'
+import { mkdtempSync } from 'node:fs'
 import { randomUUID } from 'node:crypto'
 import { equal, deepEqual, match } from 'node:assert/strict'
 import { describe, test, before, beforeEach, after } from 'node:test'
-import { mkdtempSync } from 'node:fs'
 import { writeFile, unlink, mkdir, readFile, rename } from 'node:fs/promises'
-import { API } from '../client/ApiConstants.js'
-import { logger } from './utils/logger.js'
 import { mimeFor } from './utils/mime.js'
-import { readBody } from './utils/HttpIncomingMessage.js'
-import { CorsHeader } from './utils/http-cors.js'
-import { Mockaton } from './Mockaton.js'
-import { watchMocksDir, watchStaticDir } from './Watcher.js'
-import { Commander } from '../client/ApiCommander.js'
 import { parseFilename } from '../client/Filename.js'
+import { API, Commander } from '../../index.js'
+import CONFIG from './Mockaton.test.config.js'
 const mocksDir = mkdtempSync(join(tmpdir(), 'mocks'))
 const staticDir = mkdtempSync(join(tmpdir(), 'static'))
+const stdout = []
+const stderr = []
+const proc = spawn(join(import.meta.dirname, 'cli.js'), [
+	'--config', join(import.meta.dirname, 'Mockaton.test.config.js'),
+	'--mocks-dir', mocksDir,
+	'--static-dir', staticDir,
+	'--no-open'
+])
+proc.stdout.on('data', data => { stdout.push(data.toString()) })
+proc.stderr.on('data', data => { stderr.push(data.toString()) })
+const serverAddr = await new Promise((resolve, reject) => {
+	proc.stdout.once('data', () => {
+		const addr = stdout[0].match(/Listening::(http:[^\n]+)/)[1]
+		resolve(addr)
+	})
+	proc.on('error', reject)
+})
+after(() => proc.kill('SIGUSR2'))
+const readFromMocksDir = f => readFile(join(mocksDir, f), 'utf8')
 const makeDirInMocks = dir => mkdir(join(mocksDir, dir), { recursive: true })
 const makeDirInStaticMocks = dir => mkdir(join(staticDir, dir), { recursive: true })
 const renameInMocksDir = (src, target) => rename(join(mocksDir, src), join(mocksDir, target))
 const renameInStaticMocksDir = (src, target) => rename(join(staticDir, src), join(staticDir, target))
-const readFromMocksDir = f => readFile(join(mocksDir, f), 'utf8')
-const COOKIES = { userA: 'CookieA', userB: 'CookieB' }
-const CUSTOM_EXT = 'custom_extension'
-const CUSTOM_MIME = 'custom_mime'
-const CUSTOM_HEADER_NAME = 'custom_header_name'
-const CUSTOM_HEADER_VAL = 'custom_header_val'
-const ALLOWED_ORIGIN = 'https://example.test'
-const server = await Mockaton({
-	mocksDir,
-	staticDir,
-	onReady() {},
-	cookies: COOKIES,
-	extraHeaders: [CUSTOM_HEADER_NAME, CUSTOM_HEADER_VAL],
-	extraMimes: { [CUSTOM_EXT]: CUSTOM_MIME },
-	logLevel: 'verbose',
-	corsOrigins: [ALLOWED_ORIGIN],
-	corsExposedHeaders: ['Content-Encoding'],
-	watcherEnabled: false, // But we enable it at run-time
-	watcherDebounceMs: 0
-})
-after(() => server?.close())
-const api = new Commander(
-	`http://${server.address().address}:${server.address().port}`)
+const api = new Commander(serverAddr)
 /** @returns {Promise<State>} */
 async function fetchState() {
@@ -172,14 +165,7 @@ describe('Rejects malicious URLs', () => {
 describe('Warnings', () => {
-	function spyLogger(t, method) {
-		const spy = t.mock.method(logger, method)
-		spy.mock.mockImplementation(() => null)
-		return spy.mock
-	}
-	test('rejects invalid filenames', async t => {
-		const spy = spyLogger(t, 'warn')
+	test('rejects invalid filenames', async () => {
 		const fx0 = new Fixture('bar.GET._INVALID_STATUS_.json')
 		const fx1 = new Fixture('foo._INVALID_METHOD_.202.json')
 		const fx2 = new Fixture('missing-method-and-status.json')
@@ -188,30 +174,29 @@ describe('Warnings', () => {
 		await fx2.write()
 		await api.reset()
-		equal(spy.calls[0].arguments[0], 'Invalid HTTP Response Status: "NaN"')
-		equal(spy.calls[1].arguments[0], 'Unrecognized HTTP Method: "_INVALID_METHOD_"')
-		equal(spy.calls[2].arguments[0], 'Invalid Filename Convention')
+		const log = stderr.join('')
+		match(log, /Invalid HTTP Response Status: "NaN"/)
+		match(log, /Unrecognized HTTP Method: "_INVALID_METHOD_"/)
+		match(log, /Invalid Filename Convention/)
 		await fx0.unlink()
 		await fx1.unlink()
 		await fx2.unlink()
 	})
-	test('body parser rejects invalid JSON in API requests', async t => {
-		const spy = spyLogger(t, 'access')
+	test('body parser rejects invalid JSON in API requests', async () => {
 		const r = await request(API.cookies, {
 			method: 'PATCH',
 			body: '[invalid_json]'
 		})
 		equal(r.status, 422)
-		equal(spy.calls[0].arguments[1], 'BodyReaderError: Could not parse')
+		match(stdout.at(-1), /BodyReaderError: Could not parse/)
 	})
-	test('returns 500 when a handler throws', async t => {
-		const spy = spyLogger(t, 'error')
+	test('returns 500 when a handler throws', async () => {
 		const r = await request(API.throws)
 		equal(r.status, 500)
-		equal(spy.calls[0].arguments[2], 'Test500')
+		match(stderr.at(-1), /Test500/)
 	})
 })
@@ -239,13 +224,13 @@ describe('CORS', () => {
 		const r = await request('/does-not-matter', {
 			method: 'OPTIONS',
 			headers: {
-				[CorsHeader.Origin]: ALLOWED_ORIGIN,
-				[CorsHeader.AcRequestMethod]: 'GET'
+				'origin': CONFIG.corsOrigins[0],
+				'access-control-request-method': 'GET'
 			}
 		})
 		equal(r.status, 204)
-		equal(r.headers.get(CorsHeader.AcAllowOrigin), ALLOWED_ORIGIN)
-		equal(r.headers.get(CorsHeader.AcAllowMethods), 'GET')
+		equal(r.headers.get('access-control-allow-origin'), CONFIG.corsOrigins[0])
+		equal(r.headers.get('access-control-allow-methods'), 'GET')
 	})
 	test('responds', async () => {
@@ -253,12 +238,12 @@ describe('CORS', () => {
 		await fx.sync()
 		const r = await fx.request({
 			headers: {
-				[CorsHeader.Origin]: ALLOWED_ORIGIN
+				'origin': CONFIG.corsOrigins[0]
 			}
 		})
 		equal(r.status, 200)
-		equal(r.headers.get(CorsHeader.AcAllowOrigin), ALLOWED_ORIGIN)
-		equal(r.headers.get(CorsHeader.AcExposeHeaders), 'Content-Encoding')
+		equal(r.headers.get('access-control-allow-origin'), CONFIG.corsOrigins[0])
+		equal(r.headers.get('access-control-expose-headers'), 'Content-Encoding')
 		await fx.unlink()
 	})
 })
@@ -274,6 +259,11 @@ describe('Dashboard', () => {
 		const r = await request(API.dashboard + '?foo=bar')
 		match(await r.text(), new RegExp('<!DOCTYPE html>'))
 	})
+	test('serves assets', async () => {
+		const r = await request(API.dashboard + '/app.css')
+		match(await r.text(), new RegExp(':root {'))
+	})
 })
@@ -293,7 +283,7 @@ describe('Cookie', () => {
 		const fx = new Fixture('update-cookie.GET.200.json')
 		await fx.sync()
 		const resA = await fx.request()
-		equal(resA.headers.get('set-cookie'), COOKIES.userA)
+		equal(resA.headers.get('set-cookie'), CONFIG.cookies.userA)
 		const response = await api.selectCookie('userB')
 		deepEqual(await response.json(), [
@@ -302,7 +292,7 @@ describe('Cookie', () => {
 		])
 		const resB = await fx.request()
-		equal(resB.headers.get('set-cookie'), COOKIES.userB)
+		equal(resB.headers.get('set-cookie'), CONFIG.cookies.userB)
 		await fx.unlink()
 	})
 })
@@ -378,6 +368,7 @@ describe('Proxy Fallback', () => {
 	describe('Fallback', () => {
 		let fallbackServer
 		const CUSTOM_COOKIES = ['cookieX=x', 'cookieY=y']
+		const BODY_PAYLOAD = 'text_req_body'
 		before(async () => {
 			fallbackServer = createServer(async (req, response) => {
 				response.writeHead(423, {
@@ -385,7 +376,7 @@ describe('Proxy Fallback', () => {
 					'content-type': mimeFor('.txt'),
 					'set-cookie': CUSTOM_COOKIES
 				})
-				response.end(await readBody(req)) // echoes the req body payload
+				response.end(BODY_PAYLOAD)
 			})
 			await promisify(fallbackServer.listen).bind(fallbackServer, 0, '127.0.0.1')()
 			await api.setProxyFallback(`http://localhost:${fallbackServer.address().port}`)
@@ -395,19 +386,14 @@ describe('Proxy Fallback', () => {
 		after(() => fallbackServer.close())
 		test('Relays to fallback server and saves the mock', async () => {
-			const reqBodyPayload = 'text_req_body'
-			const r = await request(`/non-existing-mock/${randomUUID()}`, {
-				method: 'POST',
-				body: reqBodyPayload
-			})
+			const r = await request(`/non-existing-mock/${randomUUID()}`, { method: 'POST' })
 			equal(r.status, 423)
 			equal(r.headers.get('custom_header'), 'my_custom_header')
 			equal(r.headers.get('set-cookie'), CUSTOM_COOKIES.join(', '))
-			equal(await r.text(), reqBodyPayload)
+			equal(await r.text(), BODY_PAYLOAD)
 			const savedBody = await readFromMocksDir('non-existing-mock/[id].POST.423.txt')
-			equal(savedBody, reqBodyPayload)
+			equal(savedBody, BODY_PAYLOAD)
 		})
 	})
@@ -623,7 +609,7 @@ describe('Dynamic Function Mocks', () => {
 		equal(r.status, 200)
 		equal(r.headers.get('content-length'), '1')
 		equal(r.headers.get('content-type'), mimeFor('.json'))
-		equal(r.headers.get('set-cookie'), COOKIES.userA)
+		equal(r.headers.get('set-cookie'), CONFIG.cookies.userA)
 		equal(await r.text(), 'A')
 		await fx.unlink()
 	})
@@ -835,10 +821,12 @@ describe('MIME', () => {
 	})
 	test('derives content-type from custom mime', async () => {
-		const fx = new Fixture(`tmp.GET.200.${CUSTOM_EXT}`)
+		const ext = Object.keys(CONFIG.extraMimes)[0]
+		const mime = Object.values(CONFIG.extraMimes)[0]
+		const fx = new Fixture(`tmp.GET.200.${ext}`)
 		await fx.sync()
 		const r = await fx.request()
-		equal(r.headers.get('content-type'), CUSTOM_MIME)
+		equal(r.headers.get('content-type'), mime)
 		await fx.unlink()
 	})
 })
@@ -852,9 +840,8 @@ describe('Headers', () => {
 	})
 	test('custom headers are included', async () => {
-		const r = await api.getState()
-		const val = r.headers.get(CUSTOM_HEADER_NAME)
-		equal(val, CUSTOM_HEADER_VAL)
+		const { headers } = await api.getState()
+		equal(headers.get(CONFIG.extraHeaders[0]), CONFIG.extraHeaders[1])
 	})
 })
@@ -1054,13 +1041,35 @@ test('head for get. returns the headers without body only for GETs requested as
 })
-describe('Registering Mocks', () => {
-	before(watchMocksDir)
+describe('Watch mocks API toggler', () => {
+	test('422 for non boolean', async () => {
+		const r = await api.setWatchMocks('not-a-boolean')
+		equal(r.status, 422)
+		equal(await r.text(), 'Expected boolean for "watchMocks"')
+	})
+	test('200', async () => {
+		equal((await api.setWatchMocks(true)).status, 200)
+		equal((await api.setWatchMocks(false)).status, 200)
+	})
+})
+describe('Registering Mocks', () => {
 	const fxA = new Fixture('register(default).GET.200.json')
 	const fxB = new Fixture('register(alt).GET.200.json')
+	test('when watcher is off, newly added mocks do not get registered', async () => {
+		await api.setWatchMocks(false)
+		const fx = new Fixture('non-auto-registered-file.GET.200.json')
+		await fx.write()
+		await sleep()
+		equal(await fx.fetchBroker(), undefined)
+		await fx.unlink()
+	})
 	test('register', async () => {
+		await api.setWatchMocks(true)
 		await fxA.register()
 		await fxB.register()
 		const b = await fxA.fetchBroker()
@@ -1141,11 +1150,19 @@ describe('Registering Mocks', () => {
 describe('Registering Static Mocks', () => {
-	before(watchStaticDir)
-	const fx = new FixtureStatic('static-register.txt')
+	test('when watcher is off, newly added mocks do not get registered', async () => {
+		await api.setWatchMocks(false)
+		const fx = new FixtureStatic('non-auto-registered-file.txt')
+		await fx.write()
+		await sleep()
+		const { staticBrokers } = await fetchState()
+		equal(staticBrokers['/' + fx.file], undefined)
+		await fx.unlink()
+	})
+	const fx = new FixtureStatic('static-register.txt', 'static-body')
 	test('registers static', async () => {
+		await api.setWatchMocks(true)
 		await fx.register()
 		const { staticBrokers } = await fetchState()
 		deepEqual(staticBrokers, {
@@ -1155,6 +1172,9 @@ describe('Registering Static Mocks', () => {
 				delayed: false
 			}
 		})
+		const response = await fx.request()
+		equal(response.status, 200)
+		equal(await response.text(), fx.body)
 	})
 	test('unregisters static', async () => {
@@ -1203,3 +1223,8 @@ describe('Registering Static Mocks', () => {
 		})
 	})
 })
+async function sleep(ms = 100) {
+	await new Promise(resolve => setTimeout(resolve, ms))
+}

package/src/server/Watcher.js CHANGED Viewed

@@ -14,6 +14,10 @@ import * as staticCollection from './staticCollection.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
+let mocksWatcher = null
+let staticWatcher = null
 /**
  * ARR Event = Add, Remove, or Rename Mock
  *
@@ -47,7 +51,7 @@ const uiSyncVersion = new class extends EventEmitter {
 export function watchMocksDir() {
 	const dir = config.mocksDir
-	watch(dir, { recursive: true, persistent: false }, (_, file) => {
+	mocksWatcher = mocksWatcher || watch(dir, { recursive: true, persistent: false }, (_, file) => {
 		if (!file)
 			return
@@ -73,7 +77,7 @@ export function watchStaticDir() {
 	if (!dir)
 		return
-	watch(dir, { recursive: true, persistent: false }, (_, file) => {
+	staticWatcher = staticWatcher || watch(dir, { recursive: true, persistent: false }, (_, file) => {
 		if (!file)
 			return
@@ -113,3 +117,16 @@ export function longPollClientSyncVersion(req, response) {
 	})
 	uiSyncVersion.subscribe(onARR)
 }
+export function startWatchers() {
+	watchMocksDir()
+	watchStaticDir()
+}
+export function stopWatchers() {
+	mocksWatcher?.close()
+	staticWatcher?.close()
+	mocksWatcher = null
+	staticWatcher = null
+}

package/src/server/WatcherDevClient.js CHANGED Viewed

@@ -17,7 +17,7 @@ const devClientWatcher = new class extends EventEmitter {
 }
-// Although `client/indexHtml.js` is watched, it returns a stale version.
+// Although `client/IndexHtml.js` is watched, it returns a stale version.
 // i.e., it would need to be a dynamic import + cache busting.
 export function watchDevSPA() {
 	watch(CLIENT_DIR, (_, file) => {

package/src/server/cli.js CHANGED Viewed

@@ -36,6 +36,9 @@ catch (error) {
 	process.exit(1)
 }
+// For clean exit on tests, so we can collect code-coverage
+process.on('SIGUSR2', () => process.exit(0))
 if (args.version)
 	console.log(pkgJSON.version)

package/src/server/cli.test.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { join } from 'node:path'
+import { equal } from 'node:assert/strict'
+import { spawnSync } from 'node:child_process'
+import { describe, test } from 'node:test'
+import pkgJSON from '../../package.json' with { type: 'json' }
+const cli = (...args) => spawnSync(join(import.meta.dirname, 'cli.js'), args, {
+	encoding: 'utf8'
+})
+describe('CLI', () => {
+	test('--invalid-flag', () => {
+		const { stderr, status } = cli('--invalid-flag')
+		equal(stderr.trim(), `Unknown option '--invalid-flag'`)
+		equal(status, 1)
+	})
+	test('invalid config file', () => {
+		const { stderr, status } = cli('--config', 'non-existing-file.js')
+		equal(stderr.trim(), `Invalid config file: non-existing-file.js`)
+		equal(status, 1)
+	})
+	test('-v outputs version from package.json', () => {
+		const { stdout, status } = cli('-v')
+		equal(stdout.trim(), pkgJSON.version)
+		equal(status, 0)
+	})
+	test('-h outputs usage message', () => {
+		const { stdout, status } = cli('-h')
+		equal(stdout.split('\n')[0], 'Usage: mockaton [options]')
+		equal(status, 0)
+	})
+	// Mockaton.test.js tests the remaining cli branch
+})

package/src/server/config.js CHANGED Viewed

@@ -7,7 +7,8 @@ import { openInBrowser } from './utils/openInBrowser.js'
 import { optional, is, validate } from './utils/validate.js'
 import { validateCorsAllowedMethods, validateCorsAllowedOrigins } from './utils/http-cors.js'
-import { jsToJsonPlugin } from './MockDispatcher.js'
+import { jsToJsonPlugin } from './MockDispatcherPlugins.js'
 /** @type {{

package/src/server/utils/mime.js CHANGED Viewed

@@ -1,5 +1,6 @@
+import { MIMEType } from 'node:util'
 import { config } from '../config.js'
-import { UNKNOWN_MIME_EXT } from '../../client/ApiConstants.js'
+import { EXT_UNKNOWN_MIME, EXT_EMPTY } from '../../client/ApiConstants.js'
 // Generated with:
@@ -143,15 +144,11 @@ function extname(filename) {
 export function extFor(mime) {
 	return mime
 		? findExt(mime)
-		: 'empty'
+		: EXT_EMPTY
 }
 function findExt(rawMime) {
-	const m = parseMime(rawMime)
+	const m = new MIMEType(rawMime).essence
 	const extraMimeToExt = mapMimeToExt(config.extraMimes)
-	return extraMimeToExt[m] || mimeToExt[m] || UNKNOWN_MIME_EXT
+	return extraMimeToExt[m] || mimeToExt[m] || EXT_UNKNOWN_MIME
 }
-export function parseMime(mime) {
-	return mime.split(';')[0].toLowerCase()
-	// RFC 9110 §8.3.1
-}

package/src/server/utils/mime.test.js CHANGED Viewed

@@ -1,15 +1,8 @@
 import { test } from 'node:test'
 import { equal } from 'node:assert/strict'
-import { parseMime, extFor, mimeFor } from './mime.js'
+import { extFor, mimeFor } from './mime.js'
-test('parseMime', () => [
-	'text/html',
-	'TEXT/html',
-	'text/html; charset=utf-8'
-].map(input =>
-	equal(parseMime(input), 'text/html')))
 test('extFor', () => [
 	'text/html',
 	'Text/html',

package/src/client/indexHtml.js DELETED Viewed

@@ -1,31 +0,0 @@
-import { API } from './ApiConstants.js'
-export const CSP = [
-	`default-src 'self'`,
-	`img-src data: blob: 'self'`
-].join(';')
-// language=html
-export const IndexHtml = (hotReloadEnabled, version) => `
-	<!DOCTYPE html>
-	<html lang="en-US">
-	<head>
-		<meta charset="UTF-8">
-		<base href="${API.dashboard}/">
-		<script type="module" src="app.js"></script>
-		<link rel="preload" href="${API.state}" as="fetch" crossorigin>
-		<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<meta name="description" content="HTTP Mock Server">
-		<title>Mockaton v${version}</title>
-	</head>
-	<body>
-	${hotReloadEnabled
-		? '<script type="module" src="watcherDev.js"></script>'
-		: ''}
-	</body>
-	</html>
-`