mockaton 10.0.0 → 10.2.0

package/README.md

@@ -15,7 +15,7 @@ An HTTP mock server for simulating APIs with minimal setup
 ## Motivation
 
 **No API state should be too hard to test.**
-With Mockaton, developers can achieve correctness and increase speed.
+With Mockaton, developers can achieve correctness and speed.
 
 ### Correctness
 - Enables testing of complex scenarios that would otherwise be skipped. e.g.,
@@ -60,9 +60,9 @@ Nonetheless, there’s a programmatic API, which is handy
 for setting up tests (see **Commander API** section below).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp810x768.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp810x768.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp810x768.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp781x772.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp781x772.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp781x772.light.gold.png">
 </picture>
 
 
@@ -174,7 +174,7 @@ Since Mockaton has no dependencies, you can create an executable
 by linking to `src/cli.js`.
 
 ```shell
-git clone https://github.com/ericfortis/mockaton.git
+git clone https://github.com/ericfortis/mockaton.git --depth 1
 ln -s `realpath mockaton/src/cli.js` ~/bin/mockaton # some dir in your $PATH
 ```
 
@@ -516,7 +516,7 @@ const server = await Mockaton(
 ## Demo App (Vite + React)
 
 ```sh  
-git clone https://github.com/ericfortis/mockaton.git
+git clone https://github.com/ericfortis/mockaton.git --depth 1
 cd mockaton/demo-app-vite
 npm install 
 

package/index.d.ts

@@ -45,7 +45,7 @@ interface Config {
 }
 
 
-export function Mockaton(options: Partial<Config>): Server | undefined
+export function Mockaton(options: Partial<Config>): Promise<Server | undefined>
 export function defineConfig(options: Partial<Config>): Partial<Config>
 
 export const jsToJsonPlugin: Plugin
@@ -97,5 +97,5 @@ export interface State {
 	collectProxied: boolean
 	proxyFallback: string
 	
-	corsAllowed: boolean
+	corsAllowed?: boolean
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.0.0",
+	"version": "10.2.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -104,7 +104,7 @@ function reinitialize(_, response) {
 async function selectCookie(req, response) {
 	const error = cookie.setCurrent(await parseJSON(req))
 	if (error)
-		sendUnprocessableContent(response, error)
+		sendUnprocessableContent(response, error?.message || error)
 	else
 		sendOK(response)
 }

package/src/Dashboard.css

@@ -157,7 +157,7 @@ header {
 		align-items: flex-end;
 		gap: 16px 10px;
 
-		@media (max-width: 800px) {
+		@media (max-width: 780px) {
 			max-width: 400px;
 		}
 	}
@@ -315,7 +315,7 @@ main {
 	min-width: 0;
 	min-height: 0;
 
-	@media (max-width: 800px) {
+	@media (max-width: 780px) {
 		flex-direction: column;
 
 		.Resizer {
@@ -335,6 +335,7 @@ main {
 		padding: 16px;
 		padding-bottom: 0;
 		border-right: 1px solid var(--colorSecondaryActionBorder);
+		user-select: none;
 		overflow-y: auto;
 		box-shadow: var(--boxShadow1);
 	}
@@ -437,7 +438,11 @@ table {
 	display: flex;
 
 	> input {
-		appearance: none;
+		/* For click drag target */
+		position: absolute;
+		width: 22px;
+		height: 22px;
+		opacity: 0;
 
 		&:focus {
 			outline: 0;

package/src/Dashboard.html

@@ -5,7 +5,7 @@
 	<link rel="stylesheet" href="./mockaton/Dashboard.css">
 	<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="Mock Server for developing UIs">
+	<meta name="description" content="HTTP Mock Server">
 	<title>Mockaton</title>
 </head>
 <body>

package/src/Dashboard.js

@@ -78,8 +78,10 @@ for (const k of Object.keys(CSS))
 
 
 /** @type {State & {
- *   groupByMethod: boolean,
  *   canProxy: boolean
+ *   groupByMethod: boolean
+ *   toggleGroupByMethod: () => void
+ *   leftSideWidth?: number
  *  }} */
 const state = {
 	brokersByMethod: {},
@@ -87,6 +89,7 @@ const state = {
 	cookies: [],
 	comments: [],
 	delay: 0,
+	
 	collectProxied: false,
 	proxyFallback: '',
 	get canProxy() {
@@ -98,8 +101,8 @@ const state = {
 		this.groupByMethod = !this.groupByMethod
 		localStorage.setItem('groupByMethod', String(this.groupByMethod))
 	},
-	
-	leftSideWidth: undefined,
+
+	leftSideWidth: undefined
 }
 
 const mockaton = new Commander(window.location.origin)
@@ -127,19 +130,19 @@ const leftSideRef = useRef()
 function App() {
 	const { leftSideWidth } = state
 	return [
-		r(Header),
-		r(Menu),
+		Header(),
+		Menu(),
 		r('main', null,
 			r('div', {
 					ref: leftSideRef,
 					style: { width: leftSideWidth + 'px' },
 					className: CSS.leftSide
 				},
-				r(MockList),
-				r(StaticFilesList)),
+				MockList(),
+				StaticFilesList()),
 			r('div', { className: CSS.rightSide },
-				r(Resizer),
-				r(PayloadViewer)))
+				Resizer(),
+				PayloadViewer()))
 	]
 }
 
@@ -153,15 +156,15 @@ function Header() {
 				width: 160
 			}),
 			r('div', null,
-				r(GlobalDelayField),
-				r(CookieSelector),
-				r(BulkSelector),
-				r(ProxyFallbackField),
-				r(ResetButton)),
+				GlobalDelayField(),
+				CookieSelector(),
+				BulkSelector(),
+				ProxyFallbackField(),
+				ResetButton()),
 			r('button', {
 				className: CSS.MenuTrigger,
 				popovertarget: 'Menu'
-			}, r(SettingsIcon))
+			}, SettingsIcon())
 		))
 }
 
@@ -251,7 +254,7 @@ function GlobalDelayField() {
 	}
 	return (
 		r('label', className(CSS.Field, CSS.GlobalDelayField),
-			r('span', null, r(TimerIcon), Strings.delay_ms),
+			r('span', null, TimerIcon(), Strings.delay_ms),
 			r('input', {
 				type: 'number',
 				min: 0,
@@ -263,7 +266,7 @@ function GlobalDelayField() {
 }
 
 function ProxyFallbackField() {
-	const { proxyFallback, collectProxied } = state
+	const { proxyFallback } = state
 	function onChange() {
 		const saveCheckbox = this.closest(`.${CSS.FallbackBackend}`).querySelector('[type=checkbox]')
 		saveCheckbox.disabled = !this.validity.valid || !this.value.trim()
@@ -279,7 +282,7 @@ function ProxyFallbackField() {
 	return (
 		r('div', className(CSS.Field, CSS.FallbackBackend),
 			r('label', null,
-				r('span', null, r(CloudIcon), Strings.fallback_server),
+				r('span', null, CloudIcon(), Strings.fallback_server),
 				r('input', {
 					type: 'url',
 					autocomplete: 'none',
@@ -287,14 +290,11 @@ function ProxyFallbackField() {
 					value: proxyFallback,
 					onChange
 				})),
-			r(SaveProxiedCheckbox, {
-				collectProxied,
-				disabled: !proxyFallback
-			})))
+			SaveProxiedCheckbox()))
 }
 
-function SaveProxiedCheckbox({ disabled }) {
-	const { collectProxied } = state
+function SaveProxiedCheckbox() {
+	const { collectProxied, canProxy } = state
 	function onChange() {
 		mockaton.setCollectProxied(this.checked)
 			.then(parseError)
@@ -304,7 +304,7 @@ function SaveProxiedCheckbox({ disabled }) {
 		r('label', className(CSS.SaveProxiedCheckbox),
 			r('input', {
 				type: 'checkbox',
-				disabled,
+				disabled: !canProxy,
 				checked: collectProxied,
 				onChange
 			}),
@@ -330,8 +330,7 @@ function ResetButton() {
 /** # MockList */
 
 function MockList() {
-	const { brokersByMethod, groupByMethod } = state
-	const canProxy = state.canProxy
+	const { brokersByMethod, groupByMethod, canProxy } = state
 
 	if (!Object.keys(brokersByMethod).length)
 		return (
@@ -355,14 +354,14 @@ function MockList() {
 }
 
 function Row({ method, urlMask, urlMaskDittoed, broker }) {
-	const canProxy = state.canProxy
+	const { canProxy } = state
 	return (
 		r('tr', { 'data-method': method, 'data-urlMask': urlMask },
-			canProxy && r('td', null, r(ProxyToggler, { broker })),
-			r('td', null, r(DelayRouteToggler, { broker })),
-			r('td', null, r(InternalServerErrorToggler, { broker })),
-			r('td', null, r(PreviewLink, { method, urlMask, urlMaskDittoed })),
-			r('td', null, r(MockSelector, { broker }))))
+			canProxy && r('td', null, ProxyToggler(broker)),
+			r('td', null, DelayRouteToggler(broker)),
+			r('td', null, InternalServerErrorToggler(broker)),
+			r('td', null, PreviewLink(method, urlMask, urlMaskDittoed)),
+			r('td', null, MockSelector(broker))))
 }
 
 function rowsFor(targetMethod) {
@@ -385,7 +384,7 @@ function rowsFor(targetMethod) {
 	}))
 }
 
-function PreviewLink({ method, urlMask, urlMaskDittoed }) {
+function PreviewLink(method, urlMask, urlMaskDittoed) {
 	async function onClick(event) {
 		event.preventDefault()
 		try {
@@ -408,8 +407,8 @@ function PreviewLink({ method, urlMask, urlMaskDittoed }) {
 			: tail))
 }
 
-/** @param {{ broker: ClientMockBroker }} props */
-function MockSelector({ broker }) {
+/** @param {ClientMockBroker} broker */
+function MockSelector(broker) {
 	const { groupByMethod } = state
 
 	function onChange() {
@@ -457,29 +456,23 @@ function MockSelector({ broker }) {
 			}, nameFor(file))))))
 }
 
-/** @param {{ broker: ClientMockBroker }} props */
-function DelayRouteToggler({ broker }) {
-	function onChange() {
+/** @param {ClientMockBroker} broker */
+function DelayRouteToggler(broker) {
+	function commit(checked) {
 		const { method, urlMask } = parseFilename(broker.mocks[0])
-		mockaton.setRouteIsDelayed(method, urlMask, this.checked)
+		mockaton.setRouteIsDelayed(method, urlMask, checked)
 			.then(parseError)
 			.catch(onError)
 	}
-	return (
-		r('label', {
-				className: CSS.DelayToggler,
-				title: Strings.delay
-			},
-			r('input', {
-				type: 'checkbox',
-				checked: broker.currentMock.delayed,
-				onChange
-			}),
-			TimerIcon()))
+	return ClickDragToggler({
+		checked: broker.currentMock.delayed,
+		commit
+	})
 }
 
-/** @param {{ broker: ClientMockBroker }} props */
-function InternalServerErrorToggler({ broker }) {
+
+/** @param {ClientMockBroker} broker */
+function InternalServerErrorToggler(broker) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
 		mockaton.select(
@@ -505,8 +498,8 @@ function InternalServerErrorToggler({ broker }) {
 			r('span', null, '500')))
 }
 
-/** @param {{ broker: ClientMockBroker }} props */
-function ProxyToggler({ broker }) {
+/** @param {ClientMockBroker} broker */
+function ProxyToggler(broker) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
 		mockaton.setRouteIsProxied(method, urlMask, this.checked)
@@ -525,7 +518,7 @@ function ProxyToggler({ broker }) {
 				checked: !broker.currentMock.file,
 				onChange
 			}),
-			r(CloudIcon)))
+			CloudIcon()))
 }
 
 
@@ -533,8 +526,7 @@ function ProxyToggler({ broker }) {
 /** # StaticFilesList */
 
 function StaticFilesList() {
-	const { staticBrokers } = state
-	const canProxy = state.canProxy
+	const { staticBrokers, canProxy } = state
 	if (!Object.keys(staticBrokers).length)
 		return null
 	const dp = dittoSplitPaths(Object.keys(staticBrokers)).map(([ditto, tail]) => ditto
@@ -549,35 +541,28 @@ function StaticFilesList() {
 			r('tbody', null,
 				Object.values(staticBrokers).map((broker, i) =>
 					r('tr', null,
-						canProxy && r('td', null, r(ProxyStaticToggler, {})),
-						r('td', null, r(DelayStaticRouteToggler, { broker })),
-						r('td', null, r(NotFoundToggler, { broker })),
+						canProxy && r('td', null, ProxyStaticToggler()),
+						r('td', null, DelayStaticRouteToggler(broker)),
+						r('td', null, NotFoundToggler(broker)),
 						r('td', null, r('a', { href: broker.route, target: '_blank' }, dp[i]))
 					)))))
 }
 
-/** @param {{ broker: ClientStaticBroker }} props */
-function DelayStaticRouteToggler({ broker }) {
-	function onChange() {
-		mockaton.setStaticRouteIsDelayed(broker.route, this.checked)
+/** @param {ClientStaticBroker} broker */
+function DelayStaticRouteToggler(broker) {
+	function commit(checked) {
+		mockaton.setStaticRouteIsDelayed(broker.route, checked)
 			.then(parseError)
 			.catch(onError)
 	}
-	return (
-		r('label', {
-				className: CSS.DelayToggler,
-				title: Strings.delay
-			},
-			r('input', {
-				type: 'checkbox',
-				checked: broker.delayed,
-				onChange
-			}),
-			TimerIcon()))
+	return ClickDragToggler({
+		checked: broker.delayed,
+		commit
+	})
 }
 
-/** @param {{ broker: ClientStaticBroker }} props */
-function NotFoundToggler({ broker }) {
+/** @param {ClientStaticBroker} broker */
+function NotFoundToggler(broker) {
 	function onChange() {
 		mockaton.setStaticRouteStatus(broker.route, this.checked ? 404 : 200)
 			.then(parseError)
@@ -596,7 +581,7 @@ function NotFoundToggler({ broker }) {
 			r('span', null, '404')))
 }
 
-function ProxyStaticToggler({}) { // TODO
+function ProxyStaticToggler() { // TODO
 	function onChange() {
 	}
 	return (
@@ -610,10 +595,44 @@ function ProxyStaticToggler({}) { // TODO
 				disabled: true,
 				onChange
 			}),
-			r(CloudIcon)))
+			CloudIcon()))
 }
 
 
+function ClickDragToggler({ checked, commit }) {
+	function onPointerEnter(event) {
+		if (event.buttons === 1)
+			onPointerDown.call(this)
+	}
+	function onPointerDown() {
+		this.checked = !this.checked
+		commit(this.checked)
+	}
+	function onClick(event) {
+		if (event.pointerType === 'mouse')
+			event.preventDefault()
+	}
+	function onChange() {
+		commit(this.checked)
+	}
+	return (
+		r('label', {
+				className: CSS.DelayToggler,
+				title: Strings.delay
+			},
+			r('input', {
+				type: 'checkbox',
+				checked,
+				onPointerEnter,
+				onPointerDown,
+				onClick,
+				onChange
+			}),
+			TimerIcon()))
+}
+
+
+
 function Resizer() {
 	return (
 		r('div', {
@@ -627,8 +646,8 @@ Resizer.panelWidth = 0
 Resizer.onPointerDown = function (event) {
 	Resizer.initialX = event.clientX
 	Resizer.panelWidth = leftSideRef.current.clientWidth
-	window.addEventListener('pointerup', Resizer.onUp)
-	window.addEventListener('pointermove', Resizer.onMove)
+	addEventListener('pointerup', Resizer.onUp)
+	addEventListener('pointermove', Resizer.onMove)
 	document.body.style.userSelect = 'none'
 	document.body.style.cursor = 'col-resize'
 }
@@ -641,8 +660,8 @@ Resizer.onMove = function (event) {
 	})
 }
 Resizer.onUp = function () {
-	window.removeEventListener('pointermove', Resizer.onMove)
-	window.removeEventListener('pointerup', Resizer.onUp)
+	removeEventListener('pointermove', Resizer.onMove)
+	removeEventListener('pointerup', Resizer.onUp)
 	cancelAnimationFrame(Resizer.raf)
 	Resizer.raf = 0
 	document.body.style.userSelect = 'auto'
@@ -860,9 +879,6 @@ function className(...args) {
 
 
 function createElement(tag, props, ...children) {
-	if (typeof tag === 'function')
-		return tag(props)
-
 	const node = document.createElement(tag)
 	for (const [k, v] of Object.entries(props || {}))
 		if (k === 'ref') v.current = node

package/src/Mockaton.js

@@ -6,12 +6,12 @@ import { config, setup } from './config.js'
 import { dispatchMock } from './MockDispatcher.js'
 import { dispatchStatic } from './StaticDispatcher.js'
 import * as staticCollection from './staticCollection.js'
-import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { watchMocksDir, watchStaticDir } from './Watcher.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
-import { sendNoContent, sendInternalServerError, sendUnprocessableContent } from './utils/http-response.js'
+import { BodyReaderError, isControlCharFree } from './utils/http-request.js'
+import { sendNoContent, sendInternalServerError, sendUnprocessableContent, sendTooLongURI, sendBadRequest } from './utils/http-response.js'
 
 
 export function Mockaton(options) {
@@ -39,27 +39,34 @@ export function Mockaton(options) {
 
 async function onRequest(req, response) {
 	response.on('error', logger.warn)
+	response.setHeader('Server', 'Mockaton')
+
+	const url = req.url || ''
+
+	if (url.length > 2048) {
+		sendTooLongURI(response)
+		return
+	}
+
+	if (!isControlCharFree(url)) {
+		sendBadRequest(response)               
+		return
+	}
 
 	try {
-		response.setHeader('Server', 'Mockaton')
+		const { method } = req
 
 		if (config.corsAllowed)
 			setCorsHeaders(req, response, config)
 
-		const { url, method } = req
-
 		if (isPreflight(req))
 			sendNoContent(response)
-
 		else if (method === 'PATCH' && apiPatchRequests.has(url))
 			await apiPatchRequests.get(url)(req, response)
-
 		else if (method === 'GET' && apiGetRequests.has(url))
 			apiGetRequests.get(url)(req, response)
-
 		else if (method === 'GET' && staticCollection.brokerByRoute(url))
 			await dispatchStatic(req, response)
-
 		else
 			await dispatchMock(req, response)
 	}

package/src/utils/http-request.js

@@ -48,3 +48,21 @@ export function readBody(req, parser = a => a) {
 		}
 	})
 }
+
+export const reControlAndDelChars = /[\x00-\x1f\x7f]/
+export function isControlCharFree(url) {
+	try {
+		const decoded = decode(url)
+		return decoded && !reControlAndDelChars.test(decoded)
+	}
+	catch {
+		return false
+	}
+}
+
+export function decode(url) {
+	const candidate = decodeURIComponent(url)
+	return candidate === decodeURIComponent(candidate) 
+		? candidate 
+		: '' // reject multiple encodings
+}

package/src/utils/http-response.js

@@ -28,21 +28,33 @@ export function sendNoContent(response) {
 }
 
 
+export function sendBadRequest(response) {
+	response.statusCode = 400
+	logger.access(response)
+	response.end()
+}
+
 export function sendNotFound(response) {
 	response.statusCode = 404
 	logger.access(response)
 	response.end()
 }
 
+export function sendTooLongURI(response) {
+	response.statusCode = 414
+	logger.access(response)
+	response.end()
+}
+
 export function sendUnprocessableContent(response, error) {
-	logger.warn(error)
+	logger.access(response, error)
 	response.statusCode = 422
 	response.end(error)
 }
 
 
 export function sendInternalServerError(response, error) {
-	logger.error(error?.message || error, error?.stack || undefined)
+	logger.error(500, logger.sanitizeURL(response.req.url), error?.message || error, error?.stack || '')
 	response.statusCode = 500
 	response.end()
 }

package/src/utils/logger.js

@@ -1,3 +1,6 @@
+import { decode, reControlAndDelChars } from './http-request.js'
+
+
 export const logger = new class {
 	#level = 'normal'
 
@@ -12,16 +15,17 @@ export const logger = new class {
 
 	accessMock(url, ...msg) {
 		if (this.#level !== 'quiet')
-			console.log(this.#msg('MOCK', this.#sanitizeURL(url), ...msg))
+			console.log(this.#msg('MOCK', this.sanitizeURL(url), ...msg))
 	}
 
-	access(response) {
+	access(response, error) {
 		if (this.#level === 'verbose')
 			console.log(this.#msg(
 				'ACCESS',
 				response.req.method,
 				response.statusCode,
-				this.#sanitizeURL(response.req.url)))
+				this.sanitizeURL(response.req.url),
+				error))
 	}
 
 	warn(...msg) {
@@ -33,10 +37,22 @@ export const logger = new class {
 	}
 
 	#msg(...msg) {
+		if (!msg.at(-1))
+			msg.pop()
 		return [new Date().toISOString(), ...msg].join('::')
 	}
-	
-	#sanitizeURL(url) {
-		return decodeURIComponent(url).replace(/[\x00-\x1F\x7F\x9B]/g, '')
+
+	sanitizeURL(url) {
+		try {
+			const decoded = decode(url)
+			if (!decoded)
+				return '__MULTI_ENCODED_URL__'
+			return decoded
+				.replace(reControlAndDelChars, '')
+				.slice(0, 200)
+		}
+		catch {
+			return '__NON_DECODABLE_URL__'
+		}
 	}
 }