mockaton 10.6.7 → 10.7.0

package/index.d.ts

@@ -1,4 +1,4 @@
-import { Server, IncomingMessage, OutgoingMessage } from 'node:http';
+import { Server, IncomingMessage, OutgoingMessage } from 'node:http'
 
 type Plugin = (
 	filePath: string,
@@ -16,7 +16,7 @@ interface Config {
 
 	host?: string,
 	port?: number
-	
+
 	logLevel?: 'normal' | 'verbose' | 'quiet'
 
 	delay?: number
@@ -37,8 +37,8 @@ interface Config {
 	corsExposedHeaders?: string[]
 	corsCredentials?: boolean
 	corsMaxAge?: number
-	
-	
+
+
 	plugins?: [filenameTester: RegExp, plugin: Plugin][]
 
 	onReady?: (address: string) => void
@@ -64,11 +64,11 @@ export type JsonPromise<T> = Promise<Response & { json(): Promise<T> }>
 
 export type ClientMockBroker = {
 	mocks: string[]
-	currentMock: {
-		file: string
-		delayed: boolean
-		proxied: boolean
-	}
+	file: string
+	status: number
+	auto500: boolean
+	delayed: boolean
+	proxied: boolean
 }
 export type ClientBrokersByMethod = {
 	[method: string]: {
@@ -89,14 +89,14 @@ export type ClientStaticBrokers = {
 export interface State {
 	brokersByMethod: ClientBrokersByMethod
 	staticBrokers: ClientStaticBrokers
-	
-	cookies: [label:string, selected:boolean][] 
+
+	cookies: [label: string, selected: boolean][]
 	comments: string[]
-	
+
 	delay: number
-	
+
 	collectProxied: boolean
 	proxyFallback: string
-	
+
 	corsAllowed?: boolean
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.6.7",
+	"version": "10.7.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -23,7 +23,7 @@
 		"start": "node src/cli.js",
 		"watch": "node --watch src/cli.js",
 		"pixaton": "node --test --import=./pixaton-tests/_setup.js --experimental-test-isolation=none 'pixaton-tests/**/*.test.js'",
-		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %s ;# %s\\n\", $4, $2 }'"
+		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %-30s ;# %s\\n\", $4, $2 }'"
 	},
 	"devDependencies": {
 		"pixaton": "1.1.3",

package/src/Api.js

@@ -21,7 +21,7 @@ export const apiGetRequests = new Map([
 	...[
 		'Dashboard.css',
 		'Dashboard.js',
-		'ApiConstants.js', 'ApiCommander.js', 'Filename.js', 'DashboardStore.js', 'DashboardDom.js',
+		'ApiCommander.js', 'ApiConstants.js', 'DashboardDom.js', 'DashboardStore.js', 'Filename.js', 
 		'Logo.svg'
 	].map(f => [API.dashboard + '/' + f, serveStatic(f)]),
 
@@ -117,7 +117,7 @@ async function selectMock(req, response) {
 		sendUnprocessableContent(response, `Missing Mock: ${file}`)
 	else {
 		broker.selectFile(file)
-		sendJSON(response, broker.currentMock)
+		sendJSON(response, broker)
 	}
 }
 
@@ -130,7 +130,7 @@ async function toggle500(req, response) {
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
 	else {
 		broker.toggle500()
-		sendJSON(response, broker.currentMock)
+		sendJSON(response, broker)
 	}
 }
 
@@ -147,7 +147,7 @@ async function setRouteIsDelayed(req, response) {
 		sendUnprocessableContent(response, `Expected boolean for "delayed"`)
 	else {
 		broker.setDelayed(delayed)
-		sendOK(response)
+		sendJSON(response, broker)
 	}
 }
 
@@ -166,7 +166,7 @@ async function setRouteIsProxied(req, response) {
 		sendUnprocessableContent(response, `There’s no proxy fallback`)
 	else {
 		broker.setProxied(proxied)
-		sendOK(response)
+		sendJSON(response, broker)
 	}
 }
 
@@ -231,7 +231,6 @@ async function setStaticRouteStatusCode(req, response) {
 	}
 }
 
-
 async function setStaticRouteIsDelayed(req, response) {
 	const body = await parseJSON(req)
 	const delayed = body[DF.delayed]

package/src/ApiCommander.js

@@ -9,27 +9,27 @@ export class Commander {
 		this.#addr = addr
 	}
 
-	#patch = (api, body) => {
-		return fetch(this.#addr + api, {
+	#patch = (api, body) =>
+		fetch(this.#addr + api, {
 			method: 'PATCH',
 			body: JSON.stringify(body)
 		})
-	}
 
 	/** @returns {JsonPromise<State>} */
-	getState = () => {
-		return fetch(this.#addr + API.state)
-	}
+	getState = () =>
+		fetch(this.#addr + API.state)
 
 	/** @returns {JsonPromise<number>} */
-	getSyncVersion = (currentSyncVersion, abortSignal) => {
-		return fetch(this.#addr + API.syncVersion, {
-			signal: AbortSignal.any([abortSignal, AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)]),
+	getSyncVersion = (currSyncVer, abortSignal) =>
+		fetch(this.#addr + API.syncVersion, {
+			signal: AbortSignal.any([
+				abortSignal,
+				AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)
+			]),
 			headers: {
-				[DF.syncVersion]: currentSyncVersion
+				[DF.syncVersion]: currSyncVer
 			}
 		})
-	}
 
 
 	reset() {

package/src/ApiConstants.js

@@ -28,12 +28,7 @@ export const DF = { // Dashboard Fields (XHR)
 	syncVersion: 'last_received_sync_version'
 }
 
-// TODO @ThinkAbout these affecting partial matches when bulk-selecting
-// e.g. 'ton' would match 
-export const AUTO_500_COMMENT = '(Mockaton 500)'
+export const HEADER_FOR_502 = 'Mockaton502'
 export const DEFAULT_MOCK_COMMENT = '(default)'
-
 export const EXT_FOR_UNKNOWN_MIME = 'unknown'
 export const LONG_POLL_SERVER_TIMEOUT = 8_000
-
-export const HEADER_FOR_502 = 'Mockaton502'

package/src/Dashboard.css

@@ -78,7 +78,7 @@ body {
 
 select, a, input, button {
 	cursor: pointer;
-	
+
 	&:focus-visible {
 		outline: 2px solid var(--colorAccent);
 	}
@@ -369,6 +369,19 @@ table {
 	> tr:first-child > th {
 		border-top: 0;
 	}
+	
+	tr.animIn {
+		opacity: 0;
+		transform: scaleY(0);
+		animation: _kfAnimIn 180ms ease-in-out forwards;
+	}
+}
+
+@keyframes _kfAnimIn {
+	to {
+		opacity: 1;
+		transform: scaleY(1);
+	}
 }
 
 .Method {
@@ -544,11 +557,22 @@ table {
 			}
 		}
 
+		&:disabled + span {
+			cursor: not-allowed;
+			opacity: 0.7;
+		}
 		&:checked + span {
 			border-color: var(--colorRed);
 			color: white;
 			background: var(--colorRed);
 		}
+		&:not(:checked):enabled:hover + span {
+			border-color: var(--colorRed);
+			color: var(--colorRed);
+		}
+		&:enabled:active + span {
+			cursor: grabbing;
+		}
 	}
 
 	> span {
@@ -558,14 +582,6 @@ table {
 		font-weight: bold;
 		color: var(--colorSecondaryAction);
 		border-radius: var(--radius);
-
-		&:hover {
-			border-color: var(--colorRed);
-			color: var(--colorRed);
-		}
-		&:active {
-			cursor: grabbing;
-		}
 	}
 }
 
@@ -628,6 +644,8 @@ table {
 		background: var(--colorAccent);
 		animation-name: _kfProgress;
 		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+		animation-direction: alternate;
 		/* duration in JavaScript */
 	}
 }

package/src/Dashboard.js

@@ -1,6 +1,6 @@
 import { createElement as r, createSvgElement as s, className, restoreFocus, Defer, Fragment, useRef } from './DashboardDom.js'
-import { AUTO_500_COMMENT, HEADER_FOR_502 } from './ApiConstants.js'
-import { store, dittoSplitPaths, BrokerRowModel } from './DashboardStore.js'
+import { store, BrokerRowModel } from './DashboardStore.js'
+import { HEADER_FOR_502 } from './ApiConstants.js'
 import { parseFilename } from './Filename.js'
 
 
@@ -28,6 +28,7 @@ const CSS = {
 	SaveProxiedCheckbox: null,
 	SettingsMenu: null,
 
+	animIn: null,
 	chosen: null,
 	dittoDir: null,
 	leftSide: null,
@@ -63,10 +64,12 @@ initRealTimeUpdates()
 initKeyboardNavigation()
 
 function render() {
+	render.count++
 	restoreFocus(() => document.body.replaceChildren(...App()))
 	if (store.hasChosenLink)
-		previewMock(store.chosenLink.method, store.chosenLink.urlMask)
+		previewMock()
 }
+render.count = 0
 
 const t = translation => translation[0]
 
@@ -156,9 +159,7 @@ function BulkSelector() {
 				},
 				r('option', { value: firstOption }, firstOption),
 				r('hr'),
-				comments.map(value => r('option', { value }, value)),
-				r('hr'),
-				r('option', { value: AUTO_500_COMMENT }, t`Auto500`)
+				comments.map(value => r('option', { value }, value))
 			)))
 }
 
@@ -278,7 +279,7 @@ function MockList() {
 		return Object.keys(store.brokersByMethod).map(method => Fragment(
 			r('tr', null,
 				r('th', { colspan: 2 + Number(store.canProxy) }),
-				r('th', null, method)),
+				r('th', { colspan: 2 }, method)),
 			store.brokersAsRowsByMethod(method).map(Row)))
 
 	return store.brokersAsRowsByMethod('*').map(Row)
@@ -289,9 +290,12 @@ function MockList() {
  * @param {number} i
  */
 function Row(row, i) {
-	const { method, urlMask } = row
+	const { key, method, urlMask } = row
 	return (
-		r('tr', { key: Row.key(method, urlMask) },
+		r('tr', {
+				key,
+				...className(render.count > 1 && row.isNew && CSS.animIn)
+			},
 			store.canProxy && r('td', null,
 				ProxyToggler(method, urlMask, row.proxied)),
 
@@ -299,7 +303,12 @@ function Row(row, i) {
 				DelayRouteToggler(method, urlMask, row.delayed)),
 
 			r('td', null,
-				InternalServerErrorToggler(method, urlMask, !row.proxied && row.selectedFileIs500)),
+				InternalServerErrorToggler(
+					method,
+					urlMask,
+					!row.proxied && row.status === 500, // checked
+					row.opts.length === 1 && row.status === 500 // disabled
+				)),
 
 			!store.groupByMethod && r('td', className(CSS.Method),
 				method),
@@ -310,14 +319,13 @@ function Row(row, i) {
 			r('td', null,
 				MockSelector(row))))
 }
-Row.key = (method, urlMask) => method + '::' + urlMask
 
 function renderRow(method, urlMask) {
 	restoreFocus(() => {
 		unChooseOld()
-		trFor(Row.key(method, urlMask))
-			.replaceWith(Row(store.brokerAsRow(method, urlMask)))
-		previewMock(method, urlMask)
+		const row = store.brokerAsRow(method, urlMask)
+		trFor(row.key).replaceWith(Row(row))
+		previewMock()
 	})
 
 	function trFor(key) {
@@ -362,7 +370,7 @@ function MockSelector(row) {
 				CSS.MockSelector,
 				row.selectedIdx > 0 && CSS.nonDefault,
 				row.selectedFileIs4xx && CSS.status4xx)
-		}, row.opts.map(([value, label, selected]) => 
+		}, row.opts.map(([value, label, selected]) =>
 			r('option', { value, selected }, label))))
 }
 
@@ -375,7 +383,7 @@ function DelayRouteToggler(method, urlMask, checked) {
 	})
 }
 
-function InternalServerErrorToggler(method, urlMask, checked) {
+function InternalServerErrorToggler(method, urlMask, checked, disabled) {
 	return (
 		r('label', {
 				className: CSS.InternalServerErrorToggler,
@@ -383,6 +391,7 @@ function InternalServerErrorToggler(method, urlMask, checked) {
 			},
 			r('input', {
 				type: 'checkbox',
+				disabled,
 				checked,
 				onChange() { store.toggle500(method, urlMask) },
 				'data-focus-group': FocusGroup.StatusToggler
@@ -410,38 +419,45 @@ function ProxyToggler(method, urlMask, checked) {
 /** # StaticFilesList */
 
 function StaticFilesList() {
-	const { staticBrokers, canProxy, groupByMethod } = store
-	if (!Object.keys(staticBrokers).length)
-		return null
-
-	const dp = dittoSplitPaths(Object.keys(staticBrokers)).map(([ditto, tail]) => ditto
-		? [r('span', className(CSS.dittoDir), ditto), tail]
-		: tail)
-	return (
-		Fragment(
+	const { canProxy, groupByMethod } = store
+	const rows = store.staticBrokersAsRows()
+	return !rows.length
+		? null
+		: Fragment(
 			r('tr', null,
 				r('th', { colspan: (2 + Number(!groupByMethod)) + Number(canProxy) }),
-				r('th', null, t`Static GET`)),
-			Object.values(staticBrokers).map(({ route, status, delayed }, i) =>
-				r('tr', null,
-					canProxy && r('td'),
-					r('td', null,
-						DelayStaticRouteToggler(route, delayed)),
+				r('th', { colspan: 2 }, t`Static GET`)),
+			rows.map(StaticRow))
+}
 
-					r('td', null,
-						NotFoundToggler(route, status === 404)),
+/** @param {StaticBrokerRowModel} row */
+function StaticRow(row) {
+	const { canProxy, groupByMethod } = store
+	const [ditto, tail] = row.urlMaskDittoed
+	return (
+		r('tr', {
+				key: row.key,
+				...className(render.count > 1 && row.isNew && CSS.animIn)
+			},
+			canProxy && r('td'),
+			r('td', null,
+				DelayStaticRouteToggler(row.urlMask, row.delayed)),
+
+			r('td', null,
+				NotFoundToggler(row.urlMask, row.status === 404)),
 
-					!groupByMethod && r('td', className(CSS.Method),
-						'GET'),
+			!groupByMethod && r('td', className(CSS.Method),
+				'GET'),
 
-					r('td', null,
-						r('a', {
-							href: route,
-							target: '_blank',
-							className: CSS.PreviewLink,
-							'data-focus-group': FocusGroup.PreviewLink
-						}, dp[i]))
-				))))
+			r('td', null,
+				r('a', {
+					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) {
@@ -586,7 +602,6 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 			' ' + mime))
 }
 
-// TODO indeterminate when there's store.delayJitter
 const SPINNER_DELAY = 80
 function PayloadViewerProgressBar() {
 	return (
@@ -594,7 +609,9 @@ function PayloadViewerProgressBar() {
 			r('div', { style: { animationDuration: store.delay - SPINNER_DELAY + 'ms' } })))
 }
 
-async function previewMock(method, urlMask) {
+async function previewMock() {
+	const { method, urlMask } = store.chosenLink
+
 	previewMock.controller?.abort()
 	previewMock.controller = new AbortController
 
@@ -609,7 +626,7 @@ async function previewMock(method, urlMask) {
 			signal: previewMock.controller.signal
 		})
 		clearTimeout(spinnerTimer)
-		const { proxied, file } = store.brokerFor(method, urlMask).currentMock
+		const { proxied, file } = store.brokerFor(method, urlMask)
 		if (proxied || file)
 			await updatePayloadViewer(proxied, file, response)
 	}

package/src/DashboardStore.js

@@ -1,22 +1,18 @@
 import { deferred } from './DashboardDom.js'
 import { Commander } from './ApiCommander.js'
 import { parseFilename, extractComments } from './Filename.js'
-import { AUTO_500_COMMENT } from './ApiConstants.js'
 
 
 const t = translation => translation[0]
-const mockaton = new Commander(location.origin)
+const api = new Commander(location.origin)
 
 export const store = {
 	onError(err) {},
 	render() {},
 	renderRow(method, urlMask) {},
 
-	/** @type {State.brokersByMethod} */
-	brokersByMethod: {},
-
-	/** @type {State.staticBrokers} */
-	staticBrokers: {},
+	brokersByMethod: /** @type {State.brokersByMethod} */ {},
+	staticBrokers: /** @type {State.staticBrokers} */ {},
 
 	cookies: [],
 	comments: [],
@@ -28,11 +24,11 @@ export const store = {
 		return Boolean(store.proxyFallback)
 	},
 
-	getSyncVersion: mockaton.getSyncVersion,
+	getSyncVersion: api.getSyncVersion,
 
 	async fetchState() {
 		try {
-			const response = await mockaton.getState()
+			const response = await api.getState()
 			if (!response.ok) throw response
 			Object.assign(store, await response.json())
 			store.render()
@@ -63,9 +59,10 @@ export const store = {
 		store.chosenLink = { method, urlMask }
 	},
 
+
 	async reset() {
 		try {
-			const response = await mockaton.reset()
+			const response = await api.reset()
 			if (!response.ok) throw response
 			store.setChosenLink('', '')
 			await store.fetchState()
@@ -75,16 +72,17 @@ export const store = {
 
 	async bulkSelectByComment(value) {
 		try {
-			const response = await mockaton.bulkSelectByComment(value)
+			const response = await api.bulkSelectByComment(value)
 			if (!response.ok) throw response
 			await store.fetchState()
 		}
 		catch (error) { store.onError(error) }
 	},
 
+
 	async setGlobalDelay(value) {
 		try {
-			const response = await mockaton.setGlobalDelay(value)
+			const response = await api.setGlobalDelay(value)
 			if (!response.ok) throw response
 			store.delay = value
 		}
@@ -93,7 +91,7 @@ export const store = {
 
 	async selectCookie(name) {
 		try {
-			const response = await mockaton.selectCookie(name)
+			const response = await api.selectCookie(name)
 			if (!response.ok) throw response
 			store.cookies = await response.json()
 		}
@@ -102,7 +100,7 @@ export const store = {
 
 	async setProxyFallback(value) {
 		try {
-			const response = await mockaton.setProxyFallback(value)
+			const response = await api.setProxyFallback(value)
 			if (!response.ok) throw response
 			store.proxyFallback = value
 			store.render()
@@ -112,7 +110,7 @@ export const store = {
 
 	async setCollectProxied(checked) {
 		try {
-			const response = await mockaton.setCollectProxied(checked)
+			const response = await api.setCollectProxied(checked)
 			if (!response.ok) throw response
 			store.collectProxied = checked
 		}
@@ -124,36 +122,53 @@ export const store = {
 		return store.brokersByMethod[method]?.[urlMask]
 	},
 
+	setBroker(broker) {
+		const { method, urlMask } = parseFilename(broker.file)
+		store.brokersByMethod[method] ??= {}
+		store.brokersByMethod[method][urlMask] = broker
+	},
+
 	_dittoCache: new Map(),
 
-	dittoedUrlFor(method, urlMask) {
-		return store._dittoCache.get(method + '::' + urlMask)
+	_brokersAsArray(byMethod = '*') {
+		const arr = []
+		for (const [method, brokers] of Object.entries(store.brokersByMethod))
+			if (byMethod === '*' || byMethod === method)
+				arr.push(...Object.values(brokers))
+		return arr
 	},
 
 	brokersAsRowsByMethod(method) {
 		const rows = store._brokersAsArray(method)
+			.map(b => new BrokerRowModel(b, store.canProxy))
+			.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
 		const urlMasksDittoed = dittoSplitPaths(rows.map(r => r.urlMask))
-		for (let i = 0; i < rows.length; i++) {
-			const r = rows[i]
+		rows.forEach((r, i) => {
 			r.setUrlMaskDittoed(urlMasksDittoed[i])
-			store._dittoCache.set(r.method + '::' + r.urlMask, r.urlMaskDittoed)
-		}
+			r.setIsNew(!store._dittoCache.has(r.key))
+			store._dittoCache.set(r.key, urlMasksDittoed[i])
+		})
 		return rows
 	},
 
-	_brokersAsArray(byMethod = '*') {
-		const rows = []
-		for (const [method, brokers] of Object.entries(store.brokersByMethod))
-			if (byMethod === '*' || byMethod === method)
-				for (const broker of Object.values(brokers))
-					rows.push(new BrokerRowModel(broker, store.canProxy))
-		return rows.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
-	},
-
 	brokerAsRow(method, urlMask) {
-		const row = new BrokerRowModel(store.brokerFor(method, urlMask), store.canProxy)
-		row.setUrlMaskDittoed(store.dittoedUrlFor(method, urlMask))
-		return row
+		const b = store.brokerFor(method, urlMask)
+		const r = new BrokerRowModel(b, store.canProxy)
+		r.setUrlMaskDittoed(store._dittoCache.get(r.key))
+		return r
+	},
+	
+	staticBrokersAsRows() {
+		const rows = Object.values(store.staticBrokers)
+			.map(b => new StaticBrokerRowModel(b))
+			.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
+		const urlMasksDittoed = dittoSplitPaths(rows.map(r => r.urlMask))
+		rows.forEach((r, i) => {
+			r.setUrlMaskDittoed(urlMasksDittoed[i])
+			r.setIsNew(!store._dittoCache.has(r.key))
+			store._dittoCache.set(r.key, urlMasksDittoed[i])
+		})
+		return rows
 	},
 
 	previewLink(method, urlMask) {
@@ -163,10 +178,10 @@ export const store = {
 
 	async selectFile(file) {
 		try {
-			const response = await mockaton.select(file)
+			const response = await api.select(file)
 			if (!response.ok) throw response
 			const { method, urlMask } = parseFilename(file)
-			store.brokerFor(method, urlMask).currentMock = await response.json()
+			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
 		}
@@ -175,9 +190,9 @@ export const store = {
 
 	async toggle500(method, urlMask) {
 		try {
-			const response = await mockaton.toggle500(method, urlMask)
+			const response = await api.toggle500(method, urlMask)
 			if (!response.ok) throw response
-			store.brokerFor(method, urlMask).currentMock = await response.json()
+			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
 		}
@@ -186,9 +201,9 @@ export const store = {
 
 	async setProxied(method, urlMask, checked) {
 		try {
-			const response = await mockaton.setRouteIsProxied(method, urlMask, checked)
+			const response = await api.setRouteIsProxied(method, urlMask, checked)
 			if (!response.ok) throw response
-			store.brokerFor(method, urlMask).currentMock.proxied = checked
+			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
 		}
@@ -197,9 +212,9 @@ export const store = {
 
 	async setDelayed(method, urlMask, checked) {
 		try {
-			const response = await mockaton.setRouteIsDelayed(method, urlMask, checked)
+			const response = await api.setRouteIsDelayed(method, urlMask, checked)
 			if (!response.ok) throw response
-			store.brokerFor(method, urlMask).currentMock.delayed = checked
+			store.setBroker(await response.json())
 		}
 		catch (error) { store.onError(error) }
 	},
@@ -207,7 +222,7 @@ export const store = {
 
 	async setDelayedStatic(route, checked) {
 		try {
-			const response = await mockaton.setStaticRouteIsDelayed(route, checked)
+			const response = await api.setStaticRouteIsDelayed(route, checked)
 			if (!response.ok) throw response
 			store.staticBrokers[route].delayed = checked
 		}
@@ -216,7 +231,7 @@ export const store = {
 
 	async setStaticRouteStatus(route, status) {
 		try {
-			const response = await mockaton.setStaticRouteStatus(route, status)
+			const response = await api.setStaticRouteStatus(route, status)
 			if (!response.ok) throw response
 			store.staticBrokers[route].status = status
 		}
@@ -312,9 +327,10 @@ dittoSplitPaths.test = function () {
 deferred(dittoSplitPaths.test)
 
 
-
 export class BrokerRowModel {
 	opts = /** @type {[key:string, label:string, selected:boolean][]} */ []
+	isNew = false
+	key = ''
 	method = ''
 	urlMask = ''
 	urlMaskDittoed = ['', '']
@@ -328,50 +344,46 @@ export class BrokerRowModel {
 	constructor(broker, canProxy) {
 		this.#broker = broker
 		this.#canProxy = canProxy
-		const { method, urlMask } = parseFilename(broker.currentMock.file)
+		const { method, urlMask } = parseFilename(broker.file)
+		this.key = 'brm' + '::' + method + '::' + urlMask
 		this.method = method
 		this.urlMask = urlMask
 		this.opts = this.#makeOptions()
 	}
-	
+
 	setUrlMaskDittoed(urlMaskDittoed) {
 		this.urlMaskDittoed = urlMaskDittoed
 	}
-
-	get delayed() {
-		return this.#broker.currentMock.delayed
-	}
-	get proxied() {
-		return this.#canProxy && this.#broker.currentMock.proxied
+	setIsNew(isNew) {
+		this.isNew = isNew
 	}
+
+	get status() { return this.#broker.status }
+	get auto500() { return this.#broker.auto500 }
+	get delayed() { return this.#broker.delayed }
+	get proxied() { return this.#canProxy && this.#broker.proxied }
+	get selectedFile() { return this.#broker.file }
 	get selectedIdx() {
 		return this.opts.findIndex(([, , selected]) => selected)
 	}
-	get selectedFile() {
-		return this.#broker.currentMock.file
-	}
 	get selectedFileIs4xx() {
-		const { status } = parseFilename(this.selectedFile)
-		return status >= 400 && status < 500
-	}
-	get selectedFileIs500() {
-		const { status } = parseFilename(this.selectedFile)
-		return status === 500
+		return this.status >= 400 && this.status < 500
 	}
 
 	#makeOptions() {
-		const proxied = this.proxied
-		const selectedIs500 = this.selectedFileIs500
-
-		const opts = this.#broker.mocks
-			.filter(f => selectedIs500 || !f.includes(AUTO_500_COMMENT))
-			.map(f => [
-				f,
-				this.#optionLabelFor(f),
-				!proxied && f === this.selectedFile
-			])
+		const opts = this.#broker.mocks.map(f => [
+			f,
+			this.#optionLabelFor(f),
+			!this.auto500 && !this.proxied && f === this.selectedFile
+		])
 
-		if (proxied)
+		if (this.auto500)
+			opts.push([
+				'__AUTO_500__',
+				t`Auto500`,
+				true
+			])
+		else if (this.proxied)
 			opts.push([
 				'__PROXIED__',
 				t`Proxied`,
@@ -383,49 +395,32 @@ export class BrokerRowModel {
 
 	#optionLabelFor(file) {
 		const { status, ext } = parseFilename(file)
-		const comments = extractComments(file)
-		const isAutogen500 = comments.includes(AUTO_500_COMMENT)
 		return [
-			isAutogen500 ? '' : status,
+			status,
 			ext === 'empty' || ext === 'unknown' ? '' : ext,
-			isAutogen500 ? t`Auto500` : comments.join(' ')
+			extractComments(file).join(' ')
 		].filter(Boolean).join(' ')
 	}
 }
 
-const TestBrokerRowModelOptions = {
-	'ignores autogen500 when unselected'() {
-		const broker = {
-			currentMock: { file: 'api/other' },
-			mocks: [`api/user${AUTO_500_COMMENT}.GET.500.empty`]
-		}
-		const row = new BrokerRowModel(broker, false)
-		console.assert(row.opts.length === 0)
-	},
-
-	'keeps non-autogen500 when unselected'() {
+const TestBrokerRowModel = {
+	'has Auto500 when is autogenerated 500'() {
 		const broker = {
-			currentMock: { file: 'api/other' },
-			mocks: [`api/user.GET.500.txt`]
+			auto500: true,
+			file: 'api/user.GET.200.json',
+			mocks: ['api/user.GET.200.json']
 		}
 		const row = new BrokerRowModel(broker, false)
-		console.assert(row.opts.length === 1)
-		console.assert(row.opts[0][1] === t`500 txt`)
-	},
-
-	'renames autogen file to Auto500'() {
-		const broker = {
-			currentMock: { file: `api/user${AUTO_500_COMMENT}.GET.500.empty` },
-			mocks: [`api/user${AUTO_500_COMMENT}.GET.500.empty`]
-		}
-		const row = new BrokerRowModel(broker, false)
-		console.assert(row.opts.length === 1)
-		console.assert(row.opts[0][1] === t`Auto500`)
+		const opts = row.opts.map(([, n, selected]) => [n, selected])
+		console.assert(deepEqual(opts, [
+			['200 json', false],
+			[t`Auto500`, true],
+		]))
 	},
 
 	'filename has extension except when empty or unknown'() {
 		const broker = {
-			currentMock: { file: `api/other` },
+			file: `api/user0.GET.200.empty`,
 			mocks: [
 				`api/user0.GET.200.empty`,
 				`api/user1.GET.200.unknown`,
@@ -434,22 +429,21 @@ const TestBrokerRowModelOptions = {
 			]
 		}
 		const row = new BrokerRowModel(broker, false)
-		// Think about, in cases like this, the only option the user has
-		// for discerning empty and unknown is on the Previewer Title
-		console.assert(deepEqual(row.opts.map(([, n]) => n), [
-			'200',
-			'200',
-			'200 json',
-			'200 json (another json)',
+		const opts = row.opts.map(([, n, selected]) => [n, selected])
+		console.assert(deepEqual(opts, [
+			['200', true],
+			['200', false],
+			['200 json', false],
+			['200 json (another json)', false]
 		]))
+		// TODO Think about, in cases like this, the only option the user has
+		//  for discerning empty and unknown is on the Previewer Title
 	},
 
 	'appends "Proxied" label iff current is proxied'() {
 		const broker = {
-			currentMock: {
-				file: 'api/foo',
-				proxied: true
-			},
+			file: 'api/foo',
+			proxied: true,
 			mocks: [`api/foo.GET.200.json`]
 		}
 		const row = new BrokerRowModel(broker, true)
@@ -459,7 +453,31 @@ const TestBrokerRowModelOptions = {
 		]))
 	}
 }
-deferred(() => Object.values(TestBrokerRowModelOptions).forEach(t => t()))
+deferred(() => Object.values(TestBrokerRowModel).forEach(t => t()))
+
+
+export class StaticBrokerRowModel {
+	isNew = false
+	key = ''
+	method = 'GET'
+	urlMaskDittoed = ['', '']
+	#broker = /** @type {ClientStaticBroker} */ {}
+
+	/** @param {ClientStaticBroker} broker */
+	constructor(broker) {
+		this.#broker = broker
+		this.key = 'sbrm' + '::' + this.method + '::' + broker.route
+	}
+	setUrlMaskDittoed(urlMaskDittoed) {
+		this.urlMaskDittoed = urlMaskDittoed
+	}
+	setIsNew(isNew) {
+		this.isNew = isNew
+	}
+	get urlMask() { return this.#broker.route }
+	get delayed() { return this.#broker.delayed }
+	get status() { return this.#broker.status }
+}
 
 function deepEqual(a, b) {
 	return JSON.stringify(a) === JSON.stringify(b)

package/src/Filename.js

@@ -22,7 +22,6 @@ export const includesComment = (filename, search) =>
 	extractComments(filename).some(comment => comment.includes(search))
 
 
-// TODO ThinkAbout 206 (reject, handle, or send in full?)
 export function validateFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')
 	if (tokens.length < 4)
@@ -34,7 +33,8 @@ export function validateFilename(file) {
 
 	if (!httpMethods.includes(method))
 		return `Unrecognized HTTP Method: "${method}"`
-}
+} 
+// TODO ThinkAbout 206 (reject, handle, or send in full?)
 
 
 export function parseFilename(file) {
@@ -54,12 +54,12 @@ function removeTrailingSlash(url = '') {
 		.replace('/#', '#')
 }
 
-// TODO ThinkAbout allowing custom status codes
 function responseStatusIsValid(status) {
 	return Number.isInteger(status)
 		&& status >= 100
 		&& status <= 599
 }
+// TODO ThinkAbout allowing custom status codes
 
 
 export function makeMockFilename(url, method, status, ext) {

package/src/MockBroker.js

@@ -1,99 +1,82 @@
 import { includesComment, extractComments, parseFilename } from './Filename.js'
-import { AUTO_500_COMMENT, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
+import { DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
 
 
-/** MockBroker is a state for a particular route. It knows the available mock files
- * that can be served for the route, the currently selected file, and if it’s delayed. */
+/** 
+ * MockBroker is a state for a particular route. It knows the available mock 
+ * files that can be served for the route, and the currently selected file, etc.
+ */
 export class MockBroker {
 	constructor(file) {
+		this.file = '' // selected mock filename
+		this.mocks = [] // filenames
+		this.status = -1
+		this.delayed = false
+		this.proxied = false
+		this.auto500 = false
 		this.urlMaskMatches = new UrlMatcher(file).urlMaskMatches
-		this.mocks = []
-		this.currentMock = {
-			file: '',
-			delayed: false,
-			proxied: false
-		}
 		this.register(file)
 	}
 
-	get file() { return this.currentMock.file }
-	get delayed() { return this.currentMock.delayed }
-	get proxied() { return this.currentMock.proxied }
-
-	get status() { return parseFilename(this.file).status }
-	get temp500IsSelected() { return this.#isTemp500(this.file) }
-
-	hasMock(file) { return this.mocks.includes(file) }
-
-	register(file) {
-		if (this.#is500(file)) {
-			if (this.temp500IsSelected)
-				this.selectFile(file)
-			this.#deleteTemp500()
-		}
-		this.mocks.push(file)
-		this.#sortMocks()
-	}
-
-	#is500(file) {
-		return parseFilename(file).status === 500
-	}
-
-	#deleteTemp500() {
-		this.mocks = this.mocks.filter(file => !this.#isTemp500(file))
-	}
-
-	#isTemp500(file) {
-		return includesComment(file, AUTO_500_COMMENT)
-	}
+	#is500 = file => parseFilename(file).status === 500
 
 	#sortMocks() {
 		this.mocks.sort()
 		const defaults = this.mocks.filter(file => includesComment(file, DEFAULT_MOCK_COMMENT))
-		const temp500 = this.mocks.filter(this.#isTemp500)
-		this.mocks = [
-			...defaults,
-			...this.mocks.filter(file => !defaults.includes(file) && !temp500.includes(file)),
-			...temp500
-		]
+		this.mocks = Array.from(new Set(defaults).union(new Set(this.mocks)))
 	}
 
-	ensureItHas500() {
-		if (!this.mocks.some(this.#is500))
-			this.#registerTemp500()
-	}
-	#registerTemp500() {
-		const { urlMask, method } = parseFilename(this.mocks[0])
-		const file = urlMask.replace(/^\//, '') // Removes leading slash
-		this.mocks.push(`${file}${AUTO_500_COMMENT}.${method}.500.empty`)
+	register(file) {
+		if (this.auto500 && this.#is500(file)) // TESTME
+			this.selectFile(file)
+		this.mocks.push(file)
+		this.#sortMocks()
 	}
 
 	unregister(file) {
 		this.mocks = this.mocks.filter(f => f !== file)
 		const isEmpty = !this.mocks.length
-			|| this.mocks.length === 1 && this.#isTemp500(this.mocks[0])
 		if (!isEmpty && this.file === file)
 			this.selectDefaultFile()
 		return isEmpty
 	}
 
+	hasMock = file => this.mocks.includes(file)
+
+	selectFile(filename) {
+		this.file = filename
+		this.proxied = false
+		this.auto500 = false
+		this.status = parseFilename(filename).status
+	}
+
 	selectDefaultFile() {
 		this.selectFile(this.mocks[0])
 	}
 
-	selectFile(filename) {
-		this.currentMock.proxied = false
-		this.currentMock.file = filename
+	toggle500() {
+		this.proxied = false // TESTME
+		if (this.auto500 || this.status === 500)
+			this.selectDefaultFile()
+		else {
+			const f = this.mocks.find(this.#is500) // TESTME
+			if (f)
+				this.selectFile(f)
+			else {
+				this.auto500 = true
+				this.status = 500 // TESTME
+			}
+		}
 	}
 
-	toggle500() {
-		this.#is500(this.currentMock.file)
-			? this.selectDefaultFile()
-			: this.selectFile(this.mocks.find(this.#is500))
+	setDelayed(delayed) {
+		this.delayed = delayed
 	}
 
-	setDelayed(delayed) { this.currentMock.delayed = delayed }
-	setProxied(proxied) { this.currentMock.proxied = proxied }
+	setProxied(proxied) {
+		this.auto500 = false // TESTME
+		this.proxied = proxied
+	}
 
 	setByMatchingComment(comment) {
 		for (const file of this.mocks)

package/src/MockDispatcher.js

@@ -35,8 +35,8 @@ export async function dispatchMock(req, response) {
 		for (let i = 0; i < config.extraHeaders.length; i += 2)
 			response.setHeader(config.extraHeaders[i], config.extraHeaders[i + 1])
 
-		response.statusCode = broker.status // TESTME plugins can change it
-		const { mime, body } = broker.temp500IsSelected
+		response.statusCode = broker.auto500 ? 500 : broker.status // TESTME plugins can change it
+		const { mime, body } = broker.auto500
 			? { mime: '', body: '' }
 			: await applyPlugins(join(config.mocksDir, broker.file), req, response)
 

package/src/Mockaton.js

@@ -10,7 +10,7 @@ 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 { BodyReaderError, isControlCharFree } from './utils/http-request.js'
+import { BodyReaderError, hasControlChars } from './utils/http-request.js'
 import { sendNoContent, sendInternalServerError, sendUnprocessableContent, sendTooLongURI, sendBadRequest } from './utils/http-response.js'
 
 
@@ -26,8 +26,7 @@ export function Mockaton(options) {
 		const server = createServer(onRequest)
 		server.on('error', reject)
 		server.listen(config.port, config.host, () => {
-			const { address, port } = server.address()
-			const url = `http://${address}:${port}`
+			const url = `http://${server.address().address}:${server.address().port}`
 			const dashboardUrl = url + API.dashboard
 			logger.info('Listening', url)
 			logger.info('Dashboard', dashboardUrl)
@@ -47,27 +46,30 @@ async function onRequest(req, response) {
 		sendTooLongURI(response)
 		return
 	}
-
-	if (!isControlCharFree(url)) {
-		sendBadRequest(response)               
+	if (hasControlChars(url)) {
+		sendBadRequest(response)
 		return
 	}
-	
-	try {
-		const route = new URL(url, 'http://_').pathname
-		const { method } = req
 
+	try {
 		if (config.corsAllowed)
 			setCorsHeaders(req, response, config)
 
+		const { method } = req
+		const { pathname } = new URL(url, 'http://_')
+
 		if (isPreflight(req))
 			sendNoContent(response)
-		else if (method === 'PATCH' && apiPatchRequests.has(route))
-			await apiPatchRequests.get(route)(req, response)
-		else if (method === 'GET' && apiGetRequests.has(route))
-			apiGetRequests.get(route)(req, response)
-		else if (method === 'GET' && staticCollection.brokerByRoute(route))
+
+		else if (method === 'PATCH' && apiPatchRequests.has(pathname))
+			await apiPatchRequests.get(pathname)(req, response)
+
+		else if (method === 'GET' && apiGetRequests.has(pathname))
+			apiGetRequests.get(pathname)(req, response)
+
+		else if (method === 'GET' && staticCollection.brokerByRoute(pathname))
 			await dispatchStatic(req, response)
+
 		else
 			await dispatchMock(req, response)
 	}

package/src/Watcher.js

@@ -8,20 +8,34 @@ import * as staticCollection from './staticCollection.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 
 
-/** # ARR = Add, Remove, or Rename Mock Event */
+/**
+ * ARR = Add, Remove, or Rename Mock Event
+ * 
+ * The emitter is debounced so it handles e.g. bulk deletes,
+ * and also renames, which are two events (delete + add).
+ */
 export const uiSyncVersion = new class extends EventEmitter {
 	version = 0
 
-	increment() {
+	increment = this.#debounce(() => {
 		this.version++
 		super.emit('ARR')
-	}
+	})
+
 	subscribe(listener) {
 		this.once('ARR', listener)
 	}
 	unsubscribe(listener) {
 		this.removeListener('ARR', listener)
 	}
+
+	#debounce(fn) {
+		let timer
+		return () => {
+			clearTimeout(timer)
+			timer = setTimeout(fn, 80)
+		}
+	}
 }
 
 export function watchMocksDir() {
@@ -29,7 +43,7 @@ export function watchMocksDir() {
 	watch(dir, { recursive: true, persistent: false }, (_, file) => {
 		if (!file)
 			return
-		
+
 		const path = join(dir, file)
 
 		if (isDirectory(path)) {
@@ -56,7 +70,7 @@ export function watchStaticDir() {
 	watch(dir, { recursive: true, persistent: false }, (_, file) => {
 		if (!file)
 			return
-		
+
 		const path = join(dir, file)
 
 		if (isDirectory(path)) {
@@ -77,4 +91,3 @@ export function watchStaticDir() {
 }
 
 // TODO config changes
-// TODO think about throttling e.g. bulk deletes/remove files

package/src/mockBrokersCollection.js

@@ -6,7 +6,6 @@ import { MockBroker } from './MockBroker.js'
 import { listFilesRecursively } from './utils/fs.js'
 import { config, isFileAllowed } from './config.js'
 import { parseFilename, validateFilename } from './Filename.js'
-import { AUTO_500_COMMENT } from './ApiConstants.js'
 
 
 /**
@@ -36,10 +35,7 @@ export function init() {
 		.sort()
 		.forEach(f => registerMock(f))
 
-	forEachBroker(broker => {
-		broker.ensureItHas500()
-		broker.selectDefaultFile()
-	})
+	forEachBroker(b => b.selectDefaultFile())
 }
 
 /** @returns {boolean} registered */
@@ -57,12 +53,9 @@ export function registerMock(file, isFromWatcher = false) {
 	else
 		collection[method][urlMask].register(file)
 
-	if (isFromWatcher && !this.file)
+	if (isFromWatcher && !collection[method][urlMask].file) // TESTME e.g. auto500 is selected and adding a new one
 		collection[method][urlMask].selectDefaultFile()
 
-	if (isFromWatcher)
-		collection[method][urlMask].ensureItHas500()
-
 	return true
 }
 
@@ -117,7 +110,6 @@ export function extractAllComments() {
 			comments.add(c)
 	})
 	return Array.from(comments)
-		.filter(c => c !== AUTO_500_COMMENT)
 }
 
 export function setMocksMatchingComment(comment) {

package/src/utils/http-request.js

@@ -50,13 +50,13 @@ export function readBody(req, parser = a => a) {
 }
 
 export const reControlAndDelChars = /[\x00-\x1f\x7f]/
-export function isControlCharFree(url) {
+export function hasControlChars(url) {
 	try {
 		const decoded = decode(url)
-		return decoded && !reControlAndDelChars.test(decoded)
+		return !decoded || reControlAndDelChars.test(decoded)
 	}
 	catch {
-		return false
+		return true
 	}
 }