mockaton 12.2.1 → 12.2.3

package/README.md

@@ -8,8 +8,7 @@ for testing difficult to reproduce backend states.
 [![codecov](https://codecov.io/github/ericfortis/mockaton/graph/badge.svg?token=90NYLMMG1J)](https://codecov.io/github/ericfortis/mockaton)
 
 
-## [Documentation ↗](https://mockaton.com) 
-## [Changelog ↗](https://mockaton.com/changelog)
+## [Documentation ↗](https://mockaton.com) | [Changelog ↗](https://mockaton.com/changelog)
 
 ## Overview
 With Mockaton, you don’t need to write code for wiring up your
@@ -22,7 +21,6 @@ For example, for [/api/company/123](#), the filename could be:
 <code>my-mocks-dir/<b>api/company</b>/[id].GET.200.json</code>
 </pre>
 
-<br/>
 
 ## Dashboard
 
@@ -32,23 +30,13 @@ For example, for [/api/company/123](#), the filename could be:
   <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.dark.gold.png">
 </picture>
 
-On the dashboard you can:
-- Select a mock variant for a particular route
-- 🕓 Delay responses
-- Trigger an autogenerated `500` error
-  - …and cycle it off (for testing retries)
-
-Nonetheless, there’s a [Control API ↗](https://mockaton.com/api), which is handy for
-setting up tests.
-
 <br/>
 
 
 ## Quick Start (Docker)
 This will spin up Mockaton with the sample directories
-included in this repo mounted on the container.
-
-_[mockaton-mocks/](./mockaton-mocks) and [mockaton-static-mocks/](./mockaton-static-mocks)_
+included in this repo mounted on the container ([mockaton-mocks/](./mockaton-mocks)
+and [mockaton-static-mocks/](./mockaton-static-mocks))
 
 ```sh
 git clone https://github.com/ericfortis/mockaton.git --depth 1
@@ -57,13 +45,7 @@ make docker
 ```
 Dashboard: http://localhost:2020/mockaton
 
-
 Test it:
 ```shell
 curl localhost:2020/api/user
 ```
-
-
-
-## License
-MIT

package/index.d.ts

@@ -44,7 +44,7 @@ export interface Config {
 	plugins?: [filenameTester: RegExp, plugin: Plugin][]
 
 	onReady?: (address: string) => void
-	
+
 	hotReload?: boolean // For UI dev purposes only
 }
 

package/package.json

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

package/src/client/ApiCommander.js

@@ -23,7 +23,7 @@ export class Commander {
 
 	/** @returns {Promise<Response>} */
 	setGlobalDelay = delay => this.#patch(API.globalDelay, delay)
-	
+
 	/** @returns {Promise<Response>} */
 	setGlobalDelayJitter = jitterPct => this.#patch(API.globalDelayJitter, jitterPct)
 

package/src/client/ApiConstants.js

@@ -1,9 +1,10 @@
-/** @KeepSync src/server/ApiConstants.js */
+/** # @SharedWithServer */
 
 const MOUNT = '/mockaton'
+
 export const API = {
 	dashboard: MOUNT,
-	
+
 	bulkSelect: MOUNT + '/bulk-select-by-comment',
 	collectProxied: MOUNT + '/collect-proxied',
 	cookies: MOUNT + '/cookies',

package/src/client/Filename.js

@@ -1,4 +1,13 @@
-// @KeepSync src/server/Filename.js
+/** # @SharedWithServer */
+
+const METHODS = [ // @KeepSync node:http.METHODS
+	'ACL', 'BIND', 'CHECKOUT', 'CONNECT', 'COPY', 'DELETE',
+	'GET', 'HEAD', 'LINK', 'LOCK', 'M-SEARCH', 'MERGE',
+	'MKACTIVITY', 'MKCALENDAR', 'MKCOL', 'MOVE', 'NOTIFY', 'OPTIONS',
+	'PATCH', 'POST', 'PROPFIND', 'PROPPATCH', 'PURGE', 'PUT',
+	'QUERY', 'REBIND', 'REPORT', 'SEARCH', 'SOURCE', 'SUBSCRIBE',
+	'TRACE', 'UNBIND', 'UNLINK', 'UNLOCK', 'UNSUBSCRIBE'
+]
 
 const reComments = /\(.*?\)/g // Anything within parentheses
 
@@ -6,6 +15,25 @@ export function extractComments(file) {
 	return Array.from(file.matchAll(reComments), ([c]) => c)
 }
 
+export function includesComment(file, search) {
+	return extractComments(file).some(c => c.includes(search))
+}
+
+
+export function validateFilename(file) {
+	const tokens = file.replace(reComments, '').split('.')
+	if (tokens.length < 4)
+		return 'Invalid Filename Convention'
+
+	const { status, method } = parseFilename(file)
+	if (!responseStatusIsValid(status))
+		return `Invalid HTTP Response Status: "${status}"`
+
+	if (!METHODS.includes(method))
+		return `Unrecognized HTTP Method: "${method}"`
+}
+
+
 export function parseFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')
 	return {
@@ -22,3 +50,19 @@ function removeTrailingSlash(url = '') {
 		.replace('/?', '?')
 		.replace('/#', '#')
 }
+
+function responseStatusIsValid(status) {
+	return Number.isInteger(status)
+		&& status >= 100
+		&& status <= 599
+}
+
+export function makeMockFilename(url, method, status, ext) {
+	const urlMask = replaceIds(removeTrailingSlash(url))
+	return [urlMask, method, status, ext].join('.')
+}
+
+const reUuidV4 = /([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/gi
+function replaceIds(filename) {
+	return filename.replaceAll(reUuidV4, '[id]')
+}

package/src/client/app-store.js

@@ -82,7 +82,7 @@ export const store = {
 		}
 		catch (error) { store.onError(error) }
 	},
-	
+
 	async setGlobalDelayJitter(value) {
 		try {
 			const response = await api.setGlobalDelayJitter(value)
@@ -160,7 +160,7 @@ export const store = {
 		r.setUrlMaskDittoed(store._dittoCache.get(r.key))
 		return r
 	},
-	
+
 	staticBrokersAsRows() {
 		const rows = Object.values(store.staticBrokers)
 			.map(b => new StaticBrokerRowModel(b))

package/src/client/app.js

@@ -11,18 +11,13 @@ import { HEADER_502 } from './ApiConstants.js'
 import CSS from './styles.css' with { type: 'css' }
 adoptCSS(CSS)
 
-const FocusGroup = {
-	ProxyToggler: 0,
-	DelayToggler: 1,
-	StatusToggler: 2,
-	PreviewLink: 3
-}
 
 const t = translation => translation[0]
 
 store.onError = onError
 store.render = render
 store.renderRow = renderRow
+
 store.fetchState()
 initRealTimeUpdates()
 initKeyboardNavigation()
@@ -64,7 +59,8 @@ function Header() {
 		r('header', null,
 			r('a', {
 					className: CSS.Logo,
-					href: 'https://mockaton.com'
+					href: 'https://mockaton.com',
+					alt: t`Documentation`
 				},
 				Logo()),
 			r('div', null,
@@ -95,7 +91,6 @@ function GlobalDelayField() {
 		r('label', className(CSS.Field, CSS.GlobalDelayField),
 			r('span', null, t`Delay (ms)`),
 			r('input', {
-				name: 'delay',
 				type: 'number',
 				min: 0,
 				step: 100,
@@ -125,7 +120,6 @@ function GlobalDelayJitterField() {
 		r('label', className(CSS.Field, CSS.GlobalDelayJitterField),
 			r('span', null, t`Max Jitter %`),
 			r('input', {
-				name: 'delay-jitter',
 				type: 'number',
 				min: 0,
 				max: 300,
@@ -148,7 +142,9 @@ function CookieSelector() {
 			r('select', {
 				autocomplete: 'off',
 				disabled,
-				title: disabled ? t`No cookies specified in config.cookies` : '',
+				title: disabled
+					? t`No cookies specified in config.cookies`
+					: undefined,
 				onChange() { store.selectCookie(this.value) }
 			}, list.map(([value, selected]) =>
 				r('option', { value, selected }, value)))))
@@ -169,9 +165,8 @@ function ProxyFallbackField() {
 			r('label', null,
 				r('span', null, t`Fallback`),
 				r('input', {
-					name: 'fallback',
 					type: 'url',
-					autocomplete: 'none',
+					name: 'fallback',
 					placeholder: t`Type backend address`,
 					value: store.proxyFallback,
 					onChange
@@ -183,7 +178,6 @@ function SaveProxiedCheckbox(ref) {
 	return (
 		r('label', className(CSS.SaveProxiedCheckbox),
 			r('input', {
-				name: 'save-proxied',
 				ref,
 				type: 'checkbox',
 				disabled: !store.canProxy,
@@ -204,13 +198,13 @@ function ResetButton() {
 
 
 function HelpLink() {
-	return r('a', {
+	return (
+		r('a', {
 			target: '_blank',
 			href: 'https://mockaton.com',
 			title: t`Documentation`,
 			className: CSS.HelpLink
-		},
-		HelpIcon())
+		}, HelpIcon()))
 }
 
 
@@ -232,7 +226,9 @@ function BulkSelector() {
 			r('select', {
 					autocomplete: 'off',
 					disabled,
-					title: disabled ? t`No mock files have comments which are anything within parentheses on the filename.` : '',
+					title: disabled
+						? t`No mock files have comments which are anything within parentheses on the filename.`
+						: undefined,
 					onChange
 				},
 				r('option', { value: firstOption }, firstOption),
@@ -246,7 +242,6 @@ function GroupByMethod() {
 	return (
 		r('label', className(CSS.GroupByMethod),
 			r('input', {
-				name: 'group-by-method',
 				type: 'checkbox',
 				checked: store.groupByMethod,
 				onChange: store.toggleGroupByMethod
@@ -284,11 +279,20 @@ function Row(row, i) {
 			},
 			store.canProxy && ProxyToggler(method, urlMask, row.proxied),
 
-			DelayRouteToggler(method, urlMask, row.delayed),
+			DelayToggler({
+				checked: row.delayed,
+				commit(checked) { store.setDelayed(method, urlMask, checked) },
+			}),
 
-			InternalServerErrorToggler(method, urlMask,
-				!row.proxied && row.status === 500, // checked
-				row.opts.length === 1 && row.status === 500), // disabled
+			StatusCodeToggler({
+				title: t`Internal Server Error`,
+				label: t`500`,
+				disabled: row.opts.length === 1 && row.status === 500,
+				checked: !row.proxied && row.status === 500,
+				onChange() {
+					store.toggle500(method, urlMask)
+				}
+			}),
 
 			!store.groupByMethod && r('span', className(CSS.Method), method),
 
@@ -327,7 +331,6 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 			...className(CSS.PreviewLink, isChosen && CSS.chosen),
 			href: urlMask,
 			autofocus,
-			'data-focus-group': FocusGroup.PreviewLink,
 			onClick
 		}, ditto
 			? [r('span', className(CSS.dittoDir), ditto), tail]
@@ -339,8 +342,15 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 function MockSelector(row) {
 	return (
 		r('select', {
-			onChange() { store.selectFile(this.value) },
-			autocomplete: 'off',
+			onChange() {
+				store.selectFile(this.value)
+			},
+			onKeyDown(event) {
+				if (event.key === 'ArrowRight' || event.key === 'ArrowLeft')
+					event.preventDefault()
+				// Because in Firefox they change the select.option, and 
+				// we use those keys for spreadsheet-like navigation.
+			},
 			'aria-label': t`Mock Selector`,
 			disabled: row.opts.length < 2,
 			...className(
@@ -352,30 +362,6 @@ function MockSelector(row) {
 }
 
 
-function DelayRouteToggler(method, urlMask, checked) {
-	return ClickDragToggler({
-		checked,
-		commit(checked) { store.setDelayed(method, urlMask, checked) },
-		focusGroup: FocusGroup.DelayToggler
-	})
-}
-
-function InternalServerErrorToggler(method, urlMask, checked, disabled) {
-	return (
-		r('label', {
-				className: CSS.InternalServerErrorToggler,
-				title: t`Internal Server Error`
-			},
-			r('input', {
-				type: 'checkbox',
-				disabled,
-				checked,
-				onChange() { store.toggle500(method, urlMask) },
-				'data-focus-group': FocusGroup.StatusToggler
-			}),
-			r('span', className(CSS.checkboxBody), t`500`)))
-}
-
 function ProxyToggler(method, urlMask, checked) {
 	return (
 		r('label', {
@@ -386,7 +372,6 @@ function ProxyToggler(method, urlMask, checked) {
 				type: 'checkbox',
 				checked,
 				onChange() { store.setProxied(method, urlMask, this.checked) },
-				'data-focus-group': FocusGroup.ProxyToggler
 			}),
 			CloudIcon()))
 }
@@ -404,7 +389,9 @@ function StaticFilesList() {
 				className(CSS.TableHeading,
 					store.canProxy && CSS.canProxy,
 					!store.groupByMethod && CSS.nonGroupedByMethod),
-				store.groupByMethod ? t`Static GET` : t`Static`),
+				store.groupByMethod
+					? t`Static GET`
+					: t`Static`),
 			rows.map(StaticRow))
 }
 
@@ -418,9 +405,25 @@ function StaticRow(row) {
 				...className(CSS.TableRow,
 					render.count > 1 && row.isNew && CSS.animIn)
 			},
-			DelayStaticRouteToggler(row.urlMask, row.delayed),
 
-			NotFoundToggler(row.urlMask, row.status === 404),
+			DelayToggler({
+				optClassName: store.canProxy && CSS.canProxy,
+				checked: row.delayed,
+				commit(checked) {
+					store.setDelayedStatic(row.urlMask, checked)
+				}
+			}),
+
+			StatusCodeToggler({
+				title: t`Not Found`,
+				label: t`404`,
+				checked: row.status === 404,
+				onChange() {
+					store.setStaticRouteStatus(row.urlMask, this.checked
+						? 404
+						: 200)
+				}
+			}),
 
 			!groupByMethod && r('span', className(CSS.Method), 'GET'),
 
@@ -428,42 +431,27 @@ function StaticRow(row) {
 				href: row.urlMask,
 				target: '_blank',
 				className: CSS.PreviewLink,
-				'data-focus-group': FocusGroup.PreviewLink
 			}, ditto
 				? [r('span', className(CSS.dittoDir), ditto), tail]
 				: tail)))
 }
 
-function DelayStaticRouteToggler(route, checked) {
-	return ClickDragToggler({
-		optClassName: store.canProxy && CSS.canProxy,
-		checked,
-		focusGroup: FocusGroup.DelayToggler,
-		commit(checked) {
-			store.setDelayedStatic(route, checked)
-		}
-	})
-}
-
-function NotFoundToggler(route, checked) {
+function StatusCodeToggler({ title, label, onChange, checked }) {
 	return (
 		r('label', {
-				className: CSS.NotFoundToggler,
-				title: t`Not Found`
+				title,
+				className: CSS.StatusCodeToggler
 			},
 			r('input', {
 				type: 'checkbox',
 				checked,
-				'data-focus-group': FocusGroup.StatusToggler,
-				onChange() {
-					store.setStaticRouteStatus(route, this.checked ? 404 : 200)
-				}
+				onChange
 			}),
-			r('span', className(CSS.checkboxBody), t`404`)))
+			r('span', className(CSS.checkboxBody), label)))
 }
 
 
-function ClickDragToggler({ checked, commit, focusGroup, optClassName }) {
+function DelayToggler({ checked, commit, optClassName }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
 			onPointerDown.call(this)
@@ -487,7 +475,6 @@ function ClickDragToggler({ checked, commit, focusGroup, optClassName }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				'data-focus-group': focusGroup,
 				checked,
 				onPointerEnter,
 				onPointerDown,
@@ -557,9 +544,10 @@ function PayloadViewer() {
 }
 
 function RightToolbar() {
-	return r('div', className(CSS.SubToolbar),
-		r('h2', { ref: payloadViewerTitleRef },
-			!store.hasChosenLink && t`Preview`))
+	return (
+		r('div', className(CSS.SubToolbar),
+			r('h2', { ref: payloadViewerTitleRef },
+				!store.hasChosenLink && t`Preview`)))
 }
 
 
@@ -589,7 +577,11 @@ const SPINNER_DELAY = 80
 function PayloadViewerProgressBar() {
 	return (
 		r('div', className(CSS.ProgressBar),
-			r('div', { style: { animationDuration: store.delay - SPINNER_DELAY + 'ms' } })))
+			r('div', {
+				style: {
+					animationDuration: store.delay - SPINNER_DELAY + 'ms'
+				}
+			})))
 }
 
 async function previewMock() {
@@ -765,45 +757,48 @@ function initRealTimeUpdates() {
 
 
 function initKeyboardNavigation() {
-	addEventListener('keydown', onKeyDown)
+	const columnSelectors = [
+		`.${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 onKeyDown(event) {
-		const pivot = document.activeElement
-		switch (event.key) {
+	const rowSelectors = [
+		...columnSelectors,
+		`.${CSS.TableRow} .${CSS.MockSelector}:enabled`,
+	]
+
+	addEventListener('keydown', function ({ key }) {
+		switch (key) {
 			case 'ArrowDown':
 			case 'ArrowUp': {
-				let fg = pivot.getAttribute('data-focus-group')
-				if (fg !== null) {
-					const offset = event.key === 'ArrowDown' ? +1 : -1
-					circularAdjacent(offset, allInFocusGroup(+fg), pivot).focus()
+				const pivot = document.activeElement
+				const sel = columnSelectors.find(s => pivot?.matches(s))
+				if (sel) {
+					const offset = key === 'ArrowDown' ? +1 : -1
+					const siblings = leftSideRef.elem.querySelectorAll(sel)
+					circularAdjacent(offset, siblings, pivot).focus()
 				}
 				break
 			}
 			case 'ArrowRight':
 			case 'ArrowLeft': {
-				if (pivot.hasAttribute('data-focus-group') || pivot.classList.contains(CSS.MockSelector)) {
-					const offset = event.key === 'ArrowRight' ? +1 : -1
-					rowFocusable(pivot, offset).focus()
+				const pivot = document.activeElement
+				const sel = rowSelectors.find(s => pivot?.matches(s))
+				if (sel) {
+					const offset = key === 'ArrowRight' ? +1 : -1
+					const siblings = pivot.closest(`.${CSS.TableRow}`).querySelectorAll(rowSelectors.join(','))
+					circularAdjacent(offset, siblings, pivot).focus()
 				}
 				break
 			}
 		}
-	}
-
-	function rowFocusable(el, step) {
-		const row = el.closest(`.${CSS.TableRow}`)
-		if (row) {
-			const focusables = Array.from(row.querySelectorAll('a, input, select:not(:disabled)'))
-			return circularAdjacent(step, focusables, el)
-		}
-	}
-
-	function allInFocusGroup(focusGroup) {
-		return Array.from(leftSideRef.elem.querySelectorAll(
-			`.${CSS.TableRow} [data-focus-group="${focusGroup}"]:is(input, a)`))
-	}
+	})
 
-	function circularAdjacent(step = 1, arr, pivot) {
+	function circularAdjacent(step, siblings, pivot) {
+		const arr = Array.from(siblings)
 		return arr[(arr.indexOf(pivot) + step + arr.length) % arr.length]
 	}
 }

package/src/client/dom-utils.js

@@ -6,12 +6,14 @@ export function className(...args) {
 
 export function createElement(tag, props, ...children) {
 	const elem = document.createElement(tag)
-	for (const [k, v] of Object.entries(props || {}))
-		if (k === 'ref') v.elem = elem
-		else if (k === 'style') Object.assign(elem.style, v)
-		else if (k.startsWith('on')) elem.addEventListener(k.slice(2).toLowerCase(), ...[v].flat())
-		else if (k in elem) elem[k] = v
-		else elem.setAttribute(k, v)
+	if (props)
+		for (const [k, v] of Object.entries(props))
+			if (v === undefined) continue
+			else if (k === 'ref') v.elem = elem
+			else if (k === 'style') Object.assign(elem.style, v)
+			else if (k.startsWith('on')) elem.addEventListener(k.slice(2).toLowerCase(), ...[v].flat())
+			else if (k in elem) elem[k] = v
+			else elem.setAttribute(k, v)
 	elem.append(...children.flat().filter(Boolean))
 	return elem
 }
@@ -66,13 +68,6 @@ function selectorFor(elem) {
 }
 
 
-
-// Minimal implementation of CSS Modules in the browser
-// TODO think about avoiding clashes when using multiple files. e.g.:
-//  - should the user pass a prefix?, or
-//  - should the ensure there's a unique top-level classname on each file
-// TODO ignore rules in comments?
-
 export function adoptCSS(sheet) {
 	document.adoptedStyleSheets.push(sheet)
 	Object.assign(sheet, extractClassNames(sheet))

package/src/client/indexHtml.js

@@ -1,6 +1,5 @@
 import { API } from './ApiConstants.js'
 
-
 export const CSP = [
 	`default-src 'self'`,
 	`img-src data: blob: 'self'`
@@ -9,24 +8,24 @@ export const CSP = [
 
 // language=html
 export const IndexHtml = (hotReloadEnabled, version) => `
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-  <meta charset="UTF-8">
-  <base href="${API.dashboard}/">
+	<!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>
 
-  <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>
+		<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>
 `

package/src/client/styles.css

@@ -7,16 +7,16 @@
 	:root {
 		color-scheme: light;
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0b61ec;
+		--colorAccent: #0059dd;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #eee;
-		--colorHeaderBackground: #f5f5f5;
+		--colorHeaderBackground: #f2f2f3;
 		--colorSecondaryButtonBackground: #fcfcfc;
 		--colorSecondaryActionBorder: #e0e0e0;
 		--colorSecondaryAction: #666;
 		--colorDisabledMockSelector: #444;
-		--colorHover: rgba(119, 193, 255, 0.5);
+		--colorHover: rgba(119, 193, 255, 0.4);
 		--colorLabel: #555;
 		--colorLightRed: #ffe4ee;
 		--colorRed: #da0f00;
@@ -32,9 +32,9 @@
 		--color4xxBackground: #68554a;
 		--colorAccent: #2495ff;
 		--colorBackground: #181818;
-		--colorHeaderBackground: #111;
+		--colorHeaderBackground: #141414;
 		--colorComboBoxBackground: #2a2a2a;
-		--colorSecondaryButtonBackground: #2a2a2a;
+		--colorSecondaryButtonBackground: #2c2c2c;
 		--colorSecondaryActionBorder: #333;
 		--colorSecondaryAction: #aaa;
 		--colorComboBoxHeaderBackground: #222;
@@ -72,6 +72,7 @@ body {
 	font-family: inherit;
 	font-size: 100%;
 	scrollbar-width: thin;
+	corner-shape: squircle
 }
 
 a:focus-visible,
@@ -86,7 +87,6 @@ a,
 select,
 button,
 input[type=checkbox] {
-	outline: 0;
 	cursor: pointer;
 }
 
@@ -198,6 +198,7 @@ header {
 		flex-shrink: 0;
 		align-self: end;
 		margin-left: auto;
+		border-radius: 50%;
 		fill: var(--colorSecondaryAction);
 
 		&:hover {
@@ -457,6 +458,7 @@ main {
 	min-width: 140px;
 	flex-grow: 1;
 	padding: 6px 8px;
+	margin-right: -2px;
 	margin-left: 4px;
 	border-radius: var(--radius);
 	word-break: break-word;
@@ -476,7 +478,7 @@ main {
 
 
 .MockSelector {
-	min-width: 80px;
+	min-width: 58px;
 	height: 24px;
 	padding-right: 20px;
 	padding-left: 8px;
@@ -493,6 +495,7 @@ main {
 	}
 	&:disabled {
 		padding-right: 4px;
+		padding-left: 0;
 		border-color: transparent;
 		appearance: none;
 		background: transparent;
@@ -604,8 +607,7 @@ main {
 	}
 }
 
-.InternalServerErrorToggler,
-.NotFoundToggler {
+.StatusCodeToggler {
 	display: flex;
 	margin-right: 10px;
 	margin-left: 8px;

package/src/server/Api.js

@@ -13,9 +13,10 @@ import {
 import { longPollClientSyncVersion } 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 { API } from './ApiConstants.js'
 import { cookie } from './cookie.js'
 import { config, ConfigValidator } from './config.js'
 
@@ -29,7 +30,7 @@ export const apiGetReqs = new Map([
 
 	[API.state, getState],
 	[API.syncVersion, longPollClientSyncVersion],
-	
+
 	[API.watchHotReload, longPollDevClientHotReload],
 	[API.throws, () => { throw new Error('Test500') }]
 ])
@@ -41,17 +42,17 @@ export const apiPatchReqs = new Map([
 	[API.cookies, selectCookie],
 	[API.globalDelay, setGlobalDelay],
 	[API.globalDelayJitter, setGlobalDelayJitter],
-	
+
 	[API.fallback, setProxyFallback],
 	[API.collectProxied, setCollectProxied],
-	
+
 	[API.bulkSelect, bulkUpdateBrokersByCommentTag],
 
 	[API.delay, setRouteIsDelayed],
 	[API.select, selectMock],
 	[API.proxied, setRouteIsProxied],
 	[API.toggle500, toggleRoute500],
-	
+
 	[API.delayStatic, setStaticRouteIsDelayed],
 	[API.staticStatus, setStaticRouteStatusCode]
 ])
@@ -220,7 +221,7 @@ async function setRouteIsProxied(req, response) {
 
 	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		response.unprocessable( `Route does not exist: ${method} ${urlMask}`)
+		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
 	else if (typeof proxied !== 'boolean')
 		response.unprocessable(`Expected boolean for "proxied"`)
 	else if (proxied && !config.proxyFallback)

package/src/server/MockBroker.js

@@ -1,5 +1,5 @@
-import { DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
-import { includesComment, extractComments, parseFilename } from './Filename.js'
+import { DEFAULT_MOCK_COMMENT } from '../client/ApiConstants.js'
+import { parseFilename, includesComment, extractComments } from '../client/Filename.js'
 
 
 /**

package/src/server/Mockaton.js

@@ -8,7 +8,8 @@ import { IncomingMessage } from './utils/HttpIncomingMessage.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
 
-import { API } from './ApiConstants.js'
+import { API } from '../client/ApiConstants.js'
+
 import { config, setup } from './config.js'
 import { apiPatchReqs, apiGetReqs } from './Api.js'
 

package/src/server/Mockaton.test.js

@@ -9,17 +9,18 @@ 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 { API } from './ApiConstants.js'
 import { Mockaton } from './Mockaton.js'
-import { parseFilename } from './Filename.js'
 import { watchMocksDir, watchStaticDir } from './Watcher.js'
 
 import { Commander } from '../client/ApiCommander.js'
+import { parseFilename } from '../client/Filename.js'
 
 
 const mocksDir = mkdtempSync(join(tmpdir(), 'mocks'))

package/src/server/ProxyRelay.js

@@ -6,7 +6,8 @@ import { write, isFile } from './utils/fs.js'
 import { readBody, BodyReaderError } from './utils/HttpIncomingMessage.js'
 
 import { config } from './config.js'
-import { makeMockFilename } from './Filename.js'
+
+import { makeMockFilename } from '../client/Filename.js'
 
 
 export async function proxy(req, response, delay) {

package/src/server/StaticDispatcher.js

@@ -24,7 +24,7 @@ export async function dispatchStatic(req, response) {
 			response.mockNotFound()
 			return
 		}
-		
+
 		logger.accessMock(req.url, 'static200')
 		if (req.headers.range)
 			await response.partialContent(req.headers.range, file)

package/src/server/Watcher.js

@@ -5,7 +5,7 @@ import { EventEmitter } from 'node:events'
 import {
 	HEADER_SYNC_VERSION,
 	LONG_POLL_SERVER_TIMEOUT
-} from './ApiConstants.js'
+} from '../client/ApiConstants.js'
 
 import { config } from './config.js'
 import { isFile, isDirectory } from './utils/fs.js'

package/src/server/WatcherDevClient.js

@@ -1,8 +1,9 @@
 import { join } from 'node:path'
 import { EventEmitter } from 'node:events'
 import { watch, readdirSync } from 'node:fs'
+
 import { config } from './config.js'
-import { LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
+import { LONG_POLL_SERVER_TIMEOUT } from '../client/ApiConstants.js'
 
 
 export const CLIENT_DIR = join(import.meta.dirname, '../client')
@@ -31,7 +32,7 @@ export function longPollDevClientHotReload(req, response) {
 		response.notFound()
 		return
 	}
-	
+
 	function onDevChange(file) {
 		devClientWatcher.unsubscribe(onDevChange)
 		response.json(file)

package/src/server/mockBrokersCollection.js

@@ -6,7 +6,7 @@ import { listFilesRecursively } from './utils/fs.js'
 import { cookie } from './cookie.js'
 import { MockBroker } from './MockBroker.js'
 import { config, isFileAllowed } from './config.js'
-import { parseFilename, validateFilename } from './Filename.js'
+import { parseFilename, validateFilename } from '../client/Filename.js'
 
 
 /**

package/src/server/utils/HttpIncomingMessage.js

@@ -69,7 +69,7 @@ export function hasControlChars(url) {
 
 export function decode(url) {
 	const candidate = decodeURIComponent(url)
-	return candidate === decodeURIComponent(candidate) 
-		? candidate 
+	return candidate === decodeURIComponent(candidate)
+		? candidate
 		: '' // reject multiple encodings
 }

package/src/server/utils/HttpServerResponse.js

@@ -3,7 +3,7 @@ import fs, { readFileSync } from 'node:fs'
 
 import { logger } from './logger.js'
 import { mimeFor } from './mime.js'
-import { HEADER_502 } from '../ApiConstants.js'
+import { HEADER_502 } from '../../client/ApiConstants.js'
 
 
 export class ServerResponse extends http.ServerResponse {

package/src/server/utils/mime.js

@@ -1,5 +1,5 @@
 import { config } from '../config.js'
-import { UNKNOWN_MIME_EXT } from '../ApiConstants.js'
+import { UNKNOWN_MIME_EXT } from '../../client/ApiConstants.js'
 
 
 // Generated with:

package/src/server/ApiConstants.js

@@ -1,32 +0,0 @@
-// @KeepSync src/client/ApiConstants.js
-
-const MOUNT = '/mockaton'
-export const API = {
-	dashboard: MOUNT,
-	
-	bulkSelect: MOUNT + '/bulk-select-by-comment',
-	collectProxied: MOUNT + '/collect-proxied',
-	cookies: MOUNT + '/cookies',
-	cors: MOUNT + '/cors',
-	delay: MOUNT + '/delay',
-	delayStatic: MOUNT + '/delay-static',
-	fallback: MOUNT + '/fallback',
-	globalDelay: MOUNT + '/global-delay',
-	globalDelayJitter: MOUNT + '/global-delay-jitter',
-	proxied: MOUNT + '/proxied',
-	reset: MOUNT + '/reset',
-	select: MOUNT + '/select',
-	state: MOUNT + '/state',
-	staticStatus: MOUNT + '/static-status',
-	syncVersion: MOUNT + '/sync-version',
-	throws: MOUNT + '/throws',
-	toggle500: MOUNT + '/toggle500',
-	watchHotReload: MOUNT + '/watch-hot-reload',
-}
-
-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

package/src/server/Filename.js

@@ -1,65 +0,0 @@
-/** @KeepSync src/client/Filename.js */
-
-import { METHODS } from 'node:http'
-
-
-const reComments = /\(.*?\)/g // Anything within parentheses
-
-export function extractComments(file) {
-	return Array.from(file.matchAll(reComments), ([c]) => c)
-}
-
-export function includesComment(file, search) {
-	return extractComments(file).some(c => c.includes(search))
-}
-
-
-export function validateFilename(file) {
-	const tokens = file.replace(reComments, '').split('.')
-	if (tokens.length < 4)
-		return 'Invalid Filename Convention'
-
-	const { status, method } = parseFilename(file)
-	if (!responseStatusIsValid(status))
-		return `Invalid HTTP Response Status: "${status}"`
-
-	if (!METHODS.includes(method))
-		return `Unrecognized HTTP Method: "${method}"`
-}
-
-
-export function parseFilename(file) {
-	const tokens = file.replace(reComments, '').split('.')
-	return {
-		ext: tokens.pop(),
-		status: Number(tokens.pop()),
-		method: tokens.pop(),
-		urlMask: '/' + removeTrailingSlash(tokens.join('.'))
-	}
-}
-
-function removeTrailingSlash(url = '') {
-	return url
-		.replace(/\/$/, '')
-		.replace('/?', '?')
-		.replace('/#', '#')
-}
-
-function responseStatusIsValid(status) {
-	return Number.isInteger(status)
-		&& status >= 100
-		&& status <= 599
-}
-
-
-export function makeMockFilename(url, method, status, ext) {
-	const urlMask = replaceIds(removeTrailingSlash(url))
-	return [urlMask, method, status, ext].join('.')
-}
-
-const reUuidV4 = /([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/gi
-function replaceIds(filename) {
-	return filename.replaceAll(reUuidV4, '[id]')
-}
-
-