mockaton 10.6.3 → 10.6.5

package/index.d.ts

@@ -67,6 +67,7 @@ export type ClientMockBroker = {
 	currentMock: {
 		file: string
 		delayed: boolean
+		proxied: boolean
 	}
 }
 export type ClientBrokersByMethod = {

package/package.json

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

package/src/Api.js

@@ -117,7 +117,7 @@ async function selectMock(req, response) {
 		sendUnprocessableContent(response, `Missing Mock: ${file}`)
 	else {
 		broker.selectFile(file)
-		sendOK(response)
+		sendJSON(response, broker.currentMock)
 	}
 }
 
@@ -130,7 +130,7 @@ async function toggle500(req, response) {
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
 	else {
 		broker.toggle500()
-		sendOK(response)
+		sendJSON(response, broker.currentMock)
 	}
 }
 
@@ -176,8 +176,6 @@ async function updateProxyFallback(req, response) {
 		sendUnprocessableContent(response, `Invalid Proxy Fallback URL`)
 		return
 	}
-	if (!fallback)
-		mockBrokersCollection.ensureAllRoutesHaveSelectedMock()
 	config.proxyFallback = fallback
 	sendOK(response)
 }

package/src/ApiCommander.js

@@ -4,8 +4,13 @@ import { API, DF, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 /** Client for controlling Mockaton via its HTTP API */
 export class Commander {
 	#addr = ''
-	constructor(addr) {
+	#then = a => a
+	#catch = e => { throw e }
+
+	constructor(addr, _then = undefined, _catch = undefined) {
 		this.#addr = addr
+		if (_then) this.#then = _then
+		if (_catch) this.#catch = _catch
 	}
 
 	#patch(api, body) {
@@ -13,6 +18,8 @@ export class Commander {
 			method: 'PATCH',
 			body: JSON.stringify(body)
 		})
+			.then(this.#then)
+			.catch(this.#catch)
 	}
 
 	/** @returns {JsonPromise<State>} */
@@ -42,7 +49,7 @@ export class Commander {
 	toggle500(routeMethod, routeUrlMask) {
 		return this.#patch(API.toggle500, {
 			[DF.routeMethod]: routeMethod,
-			[DF.routeUrlMask]: routeUrlMask,
+			[DF.routeUrlMask]: routeUrlMask
 		})
 	}
 

package/src/Dashboard.css

@@ -579,8 +579,7 @@ table {
 		border-radius: var(--radius);
 
 		&:hover {
-			border-color: var(--colorLightRed);
-			background: var(--colorLightRed);
+			border-color: var(--colorRed);
 			color: var(--colorRed);
 		}
 	}

package/src/Dashboard.js

@@ -56,7 +56,9 @@ const FocusGroup = {
 	PreviewLink: 3
 }
 
-const state = /** @type {State} */ {
+const mockaton = new Commander(location.origin, parseError, onError)
+
+const store = /** @type {State} */ {
 	brokersByMethod: {},
 	staticBrokers: {},
 	cookies: [],
@@ -66,57 +68,145 @@ const state = /** @type {State} */ {
 	collectProxied: false,
 	proxyFallback: '',
 	get canProxy() {
-		return Boolean(state.proxyFallback)
-	},
-
-	fileFor(method, urlMask) {
-		return state.brokersByMethod[method]?.[urlMask]?.currentMock.file
+		return Boolean(store.proxyFallback)
 	},
 
 	leftSideWidth: window.innerWidth / 2,
 
 	groupByMethod: initPreference('groupByMethod'),
 	toggleGroupByMethod() {
-		state.groupByMethod = !state.groupByMethod
-		togglePreference('groupByMethod', state.groupByMethod)
-		updateState()
+		store.groupByMethod = !store.groupByMethod
+		togglePreference('groupByMethod', store.groupByMethod)
+		render()
 	},
 
-	chosenLink: { method: '', urlMask: '' },
+	chosenLink: {
+		method: '',
+		urlMask: ''
+	},
+	get hasChosenLink() {
+		return store.chosenLink.method
+			&& store.chosenLink.urlMask
+	},
 	setChosenLink(method, urlMask) {
-		state.chosenLink = { method, urlMask }
+		store.chosenLink = { method, urlMask }
+	},
+
+	reset() {
+		store.setChosenLink('', '')
+		mockaton.reset()
+			.then(fetchState)
+	},
+
+	bulkSelectByComment(value) {
+		mockaton.bulkSelectByComment(value)
+			.then(fetchState)
+	},
+
+
+	setGlobalDelay(value) {
+		store.delay = value
+		mockaton.setGlobalDelay(value)
+	},
+
+	selectCookie(name) {
+		store.cookies = store.cookies.map(([n]) => [n, n === name])
+		mockaton.selectCookie(name)
+	},
+
+	setProxyFallback(value) {
+		store.proxyFallback = value
+		mockaton.setProxyFallback(value)
+			.then(render)
+	},
+
+	setCollectProxied(checked) {
+		store.collectProxied = checked
+		mockaton.setCollectProxied(checked)
+	},
+
+	brokerFor(method, urlMask) { return store.brokersByMethod[method]?.[urlMask] },
+	staticBrokerFor(route) { return store.staticBrokers[route] },
+
+	previewLink(method, urlMask) {
+		store.setChosenLink(method, urlMask)
+		renderRow(method, urlMask)
+	},
+
+	selectFile(file) {
+		mockaton.select(file).then(async response => {
+			const { method, urlMask } = parseFilename(file)
+			store.brokerFor(method, urlMask).currentMock = await response.json()
+			store.setChosenLink(method, urlMask)
+			renderRow(method, urlMask)
+		})
+	},
+
+	toggle500(method, urlMask) {
+		mockaton.toggle500(method, urlMask).then(async response => {
+			store.brokerFor(method, urlMask).currentMock = await response.json()
+			store.setChosenLink(method, urlMask)
+			renderRow(method, urlMask)
+		})
+	},
+
+	toggleProxied(method, urlMask, checked) {
+		mockaton.setRouteIsProxied(method, urlMask, checked).then(() => {
+			store.brokerFor(method, urlMask).currentMock.proxied = checked
+			store.setChosenLink(method, urlMask)
+			renderRow(method, urlMask)
+		})
+	},
+
+	setDelayed(method, urlMask, checked) {
+		mockaton.setRouteIsDelayed(method, urlMask, checked).then(() => {
+			store.brokerFor(method, urlMask).currentMock.delayed = checked
+		})
+	},
+
+
+	setDelayedStatic(route, checked) {
+		store.staticBrokerFor(route).delayed = checked
+		mockaton.setStaticRouteIsDelayed(route, checked)
+	},
+
+	setStaticRouteStatus(route, status) {
+		store.staticBrokerFor(route).status = status
+		mockaton.setStaticRouteStatus(route, status)
 	}
 }
 
 
-const mockaton = new Commander(location.origin)
-updateState()
+fetchState()
 initRealTimeUpdates()
 initKeyboardNavigation()
 
-async function updateState() {
+async function fetchState() {
 	try {
 		const response = await mockaton.getState()
 		if (!response.ok)
 			throw response.status
-
-		Object.assign(state, await response.json())
-
-		const focusedElem = selectorFor(document.activeElement)
-		document.body.replaceChildren(...App())
-		if (focusedElem)
-			document.querySelector(focusedElem)?.focus()
-
-		const { method, urlMask } = state.chosenLink
-		if (method && urlMask)
-			await previewMock(method, urlMask)
-
+		Object.assign(store, await response.json())
+		render()
 	}
 	catch (error) {
 		onError(error)
 	}
 }
 
+function render() {
+	restoreFocus(() => document.body.replaceChildren(...App()))
+	if (store.hasChosenLink)
+		previewMock(store.chosenLink.method, store.chosenLink.urlMask)
+}
+
+function restoreFocus(cb) {
+	const focusQuery = selectorFor(document.activeElement)
+	cb()
+	if (focusQuery)
+		document.querySelector(focusQuery)?.focus()
+}
+
 const r = createElement
 const s = createSvgElement
 const t = translation => translation[0]
@@ -124,7 +214,7 @@ const t = translation => translation[0]
 const leftSideRef = useRef()
 
 function App() {
-	const { leftSideWidth } = state
+	const { leftSideWidth } = store
 	return [
 		Header(),
 		r('main', null,
@@ -161,84 +251,41 @@ function Header() {
 				SettingsMenuTrigger())))
 }
 
-function SettingsMenuTrigger() {
-	const id = '_settings_menu_'
-	return (
-		r('button', {
-				title: t`Settings`,
-				popovertarget: id,
-				className: CSS.MenuTrigger
-			},
-			SettingsIcon(),
-			Defer(() => SettingsMenu(id))))
-}
-
-function SettingsMenu(id) {
-	const { groupByMethod, toggleGroupByMethod } = state
-
-	const firstInputRef = useRef()
-	function onToggle(event) {
-		if (event.newState === 'open')
-			firstInputRef.current.focus()
-	}
-	return (
-		r('menu', {
-				id,
-				popover: '',
-				className: CSS.SettingsMenu,
-				onToggle
-			},
-
-			r('label', className(CSS.GroupByMethod),
-				r('input', {
-					ref: firstInputRef,
-					type: 'checkbox',
-					checked: groupByMethod,
-					onChange: toggleGroupByMethod
-				}),
-				r('span', null, t`Group by Method`)),
-
-			r('a', {
-				href: 'https://github.com/ericfortis/mockaton',
-				target: '_blank',
-				rel: 'noopener noreferrer'
-			}, t`Documentation`)))
-}
-
-
-function CookieSelector() {
-	const { cookies } = state
+function GlobalDelayField() {
 	function onChange() {
-		mockaton.selectCookie(this.value)
-			.then(parseError)
-			.catch(onError)
+		store.setGlobalDelay(this.valueAsNumber)
+	}
+	function onWheel(event) {
+		if (event.deltaY > 0)
+			this.stepUp()
+		else
+			this.stepDown()
+		clearTimeout(onWheel.timer)
+		onWheel.timer = setTimeout(onChange.bind(this), 300)
 	}
-	const disabled = cookies.length <= 1
-	const list = cookies.length ? cookies : [[t`None`, true]]
 	return (
-		r('label', className(CSS.Field, CSS.CookieSelector),
-			r('span', null, t`Cookie`),
-			r('select', {
-				autocomplete: 'off',
-				disabled,
-				title: disabled ? t`No cookies specified in config.cookies` : '',
-				onChange
-			}, list.map(([value, selected]) =>
-				r('option', { value, selected }, value)))))
+		r('label', className(CSS.Field, CSS.GlobalDelayField),
+			r('span', null, t`Delay (ms)`),
+			r('input', {
+				type: 'number',
+				min: 0,
+				step: 100,
+				autocomplete: 'none',
+				value: store.delay,
+				onChange,
+				onWheel: [onWheel, { passive: true }]
+			})))
 }
 
 function BulkSelector() {
-	const { comments } = state
+	const { comments } = store
 	// UX wise this should be a menu instead of this `select`.
 	// But this way is easier to implement, with a few hacks.
 	const firstOption = t`Pick Comment…`
 	function onChange() {
 		const value = this.value
 		this.value = firstOption // Hack 
-		mockaton.bulkSelectByComment(value)
-			.then(parseError)
-			.then(updateState)
-			.catch(onError)
+		store.bulkSelectByComment(value)
 	}
 	const disabled = !comments.length
 	return (
@@ -253,45 +300,29 @@ function BulkSelector() {
 				},
 				r('option', { value: firstOption }, firstOption),
 				r('hr'),
-				comments.map(value =>
-					r('option', { value }, value)),
+				comments.map(value => r('option', { value }, value)),
 				r('hr'),
 				r('option', { value: AUTOGENERATED_500_COMMENT }, t`Auto500`)
 			)))
 }
 
-function GlobalDelayField() {
-	const { delay } = state
-	function onChange() {
-		state.delay = this.valueAsNumber
-		mockaton.setGlobalDelay(state.delay)
-			.then(parseError)
-			.catch(onError)
-	}
-	function onWheel(event) {
-		if (event.deltaY > 0)
-			this.stepUp()
-		else
-			this.stepDown()
-		clearTimeout(onWheel.timer)
-		onWheel.timer = setTimeout(onChange.bind(this), 300)
-	}
+function CookieSelector() {
+	const { cookies } = store
+	const disabled = cookies.length <= 1
+	const list = cookies.length ? cookies : [[t`None`, true]]
 	return (
-		r('label', className(CSS.Field, CSS.GlobalDelayField),
-			r('span', null, t`Delay (ms)`),
-			r('input', {
-				type: 'number',
-				min: 0,
-				step: 100,
-				autocomplete: 'none',
-				value: delay,
-				onChange,
-				onWheel: [onWheel, { passive: true }]
-			})))
+		r('label', className(CSS.Field, CSS.CookieSelector),
+			r('span', null, t`Cookie`),
+			r('select', {
+				autocomplete: 'off',
+				disabled,
+				title: disabled ? t`No cookies specified in config.cookies` : '',
+				onChange() { store.selectCookie(this.value) }
+			}, list.map(([value, selected]) =>
+				r('option', { value, selected }, value)))))
 }
 
 function ProxyFallbackField() {
-	const { proxyFallback } = state
 	const checkboxRef = useRef()
 	function onChange() {
 		checkboxRef.current.disabled = !this.validity.valid || !this.value.trim()
@@ -299,10 +330,7 @@ function ProxyFallbackField() {
 		if (!this.validity.valid)
 			this.reportValidity()
 		else
-			mockaton.setProxyFallback(this.value.trim())
-				.then(parseError)
-				.then(updateState)
-				.catch(onError)
+			store.setProxyFallback(this.value.trim())
 	}
 	return (
 		r('div', className(CSS.Field, CSS.FallbackBackend),
@@ -312,92 +340,103 @@ function ProxyFallbackField() {
 					type: 'url',
 					autocomplete: 'none',
 					placeholder: t`Type backend address`,
-					value: proxyFallback,
+					value: store.proxyFallback,
 					onChange
 				})),
 			SaveProxiedCheckbox(checkboxRef)))
 }
 
 function SaveProxiedCheckbox(ref) {
-	const { collectProxied, canProxy } = state
-	function onChange() {
-		mockaton.setCollectProxied(this.checked)
-			.then(parseError)
-			.catch(onError)
-	}
 	return (
 		r('label', className(CSS.SaveProxiedCheckbox),
 			r('input', {
 				ref,
 				type: 'checkbox',
-				disabled: !canProxy,
-				checked: collectProxied,
-				onChange
+				disabled: !store.canProxy,
+				checked: store.collectProxied,
+				onChange() { store.setCollectProxied(this.checked) }
 			}),
 			r('span', null, t`Save Mocks`)))
 }
 
 function ResetButton() {
-	function onClick() {
-		state.setChosenLink('', '')
-		mockaton.reset()
-			.then(parseError)
-			.then(updateState)
-			.catch(onError)
-	}
 	return (
 		r('button', {
 			className: CSS.ResetButton,
-			onClick
+			onClick: store.reset
 		}, t`Reset`))
 }
 
+function SettingsMenuTrigger() {
+	const id = '_settings_menu_'
+	return (
+		r('button', {
+				title: t`Settings`,
+				popovertarget: id,
+				className: CSS.MenuTrigger
+			},
+			SettingsIcon(),
+			Defer(() => SettingsMenu(id))))
+}
+
+function SettingsMenu(id) {
+	const firstInputRef = useRef()
+	function onToggle(event) {
+		if (event.newState === 'open')
+			firstInputRef.current.focus()
+	}
+	return (
+		r('menu', {
+				id,
+				popover: '',
+				className: CSS.SettingsMenu,
+				onToggle
+			},
+
+			r('label', className(CSS.GroupByMethod),
+				r('input', {
+					ref: firstInputRef,
+					type: 'checkbox',
+					checked: store.groupByMethod,
+					onChange: store.toggleGroupByMethod
+				}),
+				r('span', null, t`Group by Method`)),
+
+			r('a', {
+				href: 'https://github.com/ericfortis/mockaton',
+				target: '_blank',
+				rel: 'noopener noreferrer'
+			}, t`Documentation`)))
+}
+
 
 
 /** # MockList */
 
 function MockList() {
-	const { brokersByMethod, groupByMethod, canProxy } = state
-
-	if (!Object.keys(brokersByMethod).length)
+	if (!Object.keys(store.brokersByMethod).length)
 		return (
 			r('div', className(CSS.empty),
 				t`No mocks found`))
 
-	if (groupByMethod)
-		return Object.keys(brokersByMethod).map(method => Fragment(
+	if (store.groupByMethod)
+		return Object.keys(store.brokersByMethod).map(method => Fragment(
 			r('tr', null,
-				r('th', { colspan: 2 + Number(canProxy) }),
+				r('th', { colspan: 2 + Number(store.canProxy) }),
 				r('th', null, method)),
 			rowsFor(method).map(Row)))
 
 	return rowsFor('*').map(Row)
 }
 
-
-function Row({ method, urlMask, urlMaskDittoed, broker }, i) {
-	const { canProxy, groupByMethod } = state
-	return (
-		r('tr', { key: method + '::' + urlMask },
-			canProxy && r('td', null, ProxyToggler(broker)),
-			r('td', null, DelayRouteToggler(broker)),
-			r('td', null, InternalServerErrorToggler(broker)),
-			!groupByMethod && r('td', className(CSS.Method), method),
-			r('td', null, PreviewLink(method, urlMask, urlMaskDittoed, i === 0)),
-			r('td', null, MockSelector(broker))))
-}
-
 function rowsFor(targetMethod) {
-	const { brokersByMethod } = state
-
 	const rows = []
-	for (const [method, brokers] of Object.entries(brokersByMethod))
+	for (const [method, brokers] of Object.entries(store.brokersByMethod))
 		if (targetMethod === '*' || targetMethod === method)
 			for (const [urlMask, broker] of Object.entries(brokers))
 				rows.push({ method, urlMask, broker })
 
 	const sorted = rows.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
-
 	const urlMasksDittoed = dittoSplitPaths(sorted.map(r => r.urlMask))
 	return sorted.map((r, i) => ({
 		...r,
@@ -405,22 +444,50 @@ function rowsFor(targetMethod) {
 	}))
 }
 
+function Row({ method, urlMask, urlMaskDittoed, broker }, i) {
+	const key = Row.key(method, urlMask)
+	Row.ditto.set(key, urlMaskDittoed)
+	return (
+		r('tr', { key },
+			store.canProxy && r('td', null, ProxyToggler(broker)),
+			r('td', null, DelayRouteToggler(broker)),
+			r('td', null, InternalServerErrorToggler(broker)),
+			!store.groupByMethod && r('td', className(CSS.Method), method),
+			r('td', null, PreviewLink(method, urlMask, urlMaskDittoed, i === 0)),
+			r('td', null, MockSelector(broker))))
+}
+Row.key = (method, urlMask) => method + '::' + urlMask
+Row.ditto = new Map()
+
+function renderRow(method, urlMask) {
+	restoreFocus(() => {
+		unChooseOld()
+		const key = Row.key(method, urlMask)
+		trFor(key).replaceWith(Row({
+			method,
+			urlMask,
+			urlMaskDittoed: Row.ditto.get(key),
+			broker: store.brokerFor(method, urlMask)
+		}))
+		previewMock(method, urlMask)
+	})
+
+	function trFor(key) {
+		return document.querySelector(`body > main > .${CSS.leftSide} tr[key="${key}"]`)
+	}
+	function unChooseOld() {
+		return document.querySelector(`body > main > .${CSS.leftSide} tr .${CSS.chosen}`)
+			?.classList.remove(CSS.chosen)
+	}
+}
+
 
 function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
-	async function onClick(event) {
+	function onClick(event) {
 		event.preventDefault()
-		try {
-			findChosenLink()?.classList.remove(CSS.chosen)
-			this.classList.add(CSS.chosen)
-			state.setChosenLink(method, urlMask)
-			await previewMock(method, urlMask)
-		}
-		catch (error) {
-			onError(error)
-		}
+		store.previewLink(method, urlMask)
 	}
-	const { chosenLink } = state
-	const isChosen = chosenLink.method === method && chosenLink.urlMask === urlMask
+	const isChosen = store.chosenLink.method === method && store.chosenLink.urlMask === urlMask
 	const [ditto, tail] = urlMaskDittoed
 	return (
 		r('a', {
@@ -434,30 +501,18 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 			: tail))
 }
 
-function findChosenLink() {
-	return document.querySelector(
-		`body > main > .${CSS.leftSide} .${CSS.PreviewLink}.${CSS.chosen}`)
-}
-
-const STR_PROXIED = t`Proxied`
 
 /** @param {ClientMockBroker} broker */
 function MockSelector(broker) {
-	function onChange() {
-		const { method, urlMask } = parseFilename(this.value)
-		state.setChosenLink(method, urlMask)
-		mockaton.select(this.value)
-			.then(parseError)
-			.then(updateState)
-			.catch(onError)
-	}
-
+	const STR_PROXIED = t`Proxied`
+	
 	let selected = broker.currentMock.file
 	const { status } = parseFilename(selected)
 	const files = broker.mocks.filter(item =>
 		status === 500 ||
 		!item.includes(AUTOGENERATED_500_COMMENT))
-	if (!selected) {
+	
+	if (store.canProxy && broker.currentMock.proxied) {
 		selected = STR_PROXIED
 		files.push(selected)
 	}
@@ -477,7 +532,7 @@ function MockSelector(broker) {
 
 	return (
 		r('select', {
-			onChange,
+			onChange() { store.selectFile(this.value) },
 			autocomplete: 'off',
 			'aria-label': t`Mock Selector`,
 			disabled: files.length <= 1,
@@ -496,9 +551,7 @@ function MockSelector(broker) {
 function DelayRouteToggler(broker) {
 	function commit(checked) {
 		const { method, urlMask } = parseFilename(broker.mocks[0])
-		mockaton.setRouteIsDelayed(method, urlMask, checked)
-			.then(parseError)
-			.catch(onError)
+		store.setDelayed(method, urlMask, checked)
 	}
 	return ClickDragToggler({
 		checked: broker.currentMock.delayed,
@@ -512,11 +565,7 @@ function DelayRouteToggler(broker) {
 function InternalServerErrorToggler(broker) {
 	function onChange() {
 		const { method, urlMask } = parseFilename(broker.mocks[0])
-		state.setChosenLink(method, urlMask)
-		mockaton.toggle500(method, urlMask)
-			.then(parseError)
-			.then(updateState)
-			.catch(onError)
+		store.toggle500(method, urlMask)
 	}
 	return (
 		r('label', {
@@ -526,7 +575,6 @@ function InternalServerErrorToggler(broker) {
 			r('input', {
 				type: 'checkbox',
 				'data-focus-group': FocusGroup.StatusToggler,
-				name: broker.currentMock.file,
 				checked: parseFilename(broker.currentMock.file).status === 500,
 				onChange
 			}),
@@ -537,11 +585,7 @@ function InternalServerErrorToggler(broker) {
 function ProxyToggler(broker) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
-		state.setChosenLink(method, urlMask)
-		mockaton.setRouteIsProxied(method, urlMask, this.checked)
-			.then(parseError)
-			.then(updateState)
-			.catch(onError)
+		store.toggleProxied(method, urlMask, this.checked)
 	}
 	return (
 		r('label', {
@@ -550,7 +594,7 @@ function ProxyToggler(broker) {
 			},
 			r('input', {
 				type: 'checkbox',
-				checked: !broker.currentMock.file,
+				checked: broker.currentMock.proxied,
 				onChange,
 				'data-focus-group': FocusGroup.ProxyToggler
 			}),
@@ -562,7 +606,7 @@ function ProxyToggler(broker) {
 /** # StaticFilesList */
 
 function StaticFilesList() {
-	const { staticBrokers, canProxy, groupByMethod } = state
+	const { staticBrokers, canProxy, groupByMethod } = store
 	if (!Object.keys(staticBrokers).length)
 		return null
 	const dp = dittoSplitPaths(Object.keys(staticBrokers)).map(([ditto, tail]) => ditto
@@ -590,25 +634,17 @@ function StaticFilesList() {
 
 /** @param {ClientStaticBroker} broker */
 function DelayStaticRouteToggler(broker) {
-	function commit(checked) {
-		mockaton.setStaticRouteIsDelayed(broker.route, checked)
-			.then(parseError)
-			.catch(onError)
-	}
 	return ClickDragToggler({
 		checked: broker.delayed,
-		commit,
-		focusGroup: FocusGroup.DelayToggler
+		focusGroup: FocusGroup.DelayToggler,
+		commit(checked) {
+			store.setDelayedStatic(broker.route, checked)
+		}
 	})
 }
 
 /** @param {ClientStaticBroker} broker */
 function NotFoundToggler(broker) {
-	function onChange() {
-		mockaton.setStaticRouteStatus(broker.route, this.checked ? 404 : 200)
-			.then(parseError)
-			.catch(onError)
-	}
 	return (
 		r('label', {
 				className: CSS.NotFoundToggler,
@@ -617,8 +653,10 @@ function NotFoundToggler(broker) {
 			r('input', {
 				type: 'checkbox',
 				checked: broker.status === 404,
-				onChange,
-				'data-focus-group': FocusGroup.StatusToggler
+				'data-focus-group': FocusGroup.StatusToggler,
+				onChange() {
+					store.setStaticRouteStatus(broker.route, this.checked ? 404 : 200)
+				}
 			}),
 			r('span', null, t`404`)))
 }
@@ -658,7 +696,6 @@ function ClickDragToggler({ checked, commit, focusGroup }) {
 			TimerIcon()))
 }
 
-
 function Resizer() {
 	let raf = 0
 	let initialX = 0
@@ -679,8 +716,8 @@ function Resizer() {
 	function onMove(event) {
 		const MIN_LEFT_WIDTH = 380
 		raf = raf || requestAnimationFrame(() => {
-			state.leftSideWidth = Math.max(panelWidth - (initialX - event.clientX), MIN_LEFT_WIDTH)
-			leftSideRef.current.style.width = state.leftSideWidth + 'px'
+			store.leftSideWidth = Math.max(panelWidth - (initialX - event.clientX), MIN_LEFT_WIDTH)
+			leftSideRef.current.style.width = store.leftSideWidth + 'px'
 			raf = 0
 		})
 	}
@@ -712,9 +749,11 @@ const payloadViewerCodeRef = useRef()
 function PayloadViewer() {
 	return (
 		r('div', className(CSS.PayloadViewer),
-			r('h2', { ref: payloadViewerTitleRef }, t`Preview`),
+			r('h2', { ref: payloadViewerTitleRef },
+				!store.hasChosenLink && t`Preview`),
 			r('pre', null,
-				r('code', { ref: payloadViewerCodeRef }, t`Click a link to preview it`))))
+				r('code', { ref: payloadViewerCodeRef },
+					!store.hasChosenLink && t`Click a link to preview it`))))
 }
 
 function PayloadViewerTitle({ file, statusText }) {
@@ -741,7 +780,7 @@ const SPINNER_DELAY = 80
 function PayloadViewerProgressBar() {
 	return (
 		r('div', className(CSS.ProgressBar),
-			r('div', { style: { animationDuration: state.delay - SPINNER_DELAY + 'ms' } })))
+			r('div', { style: { animationDuration: store.delay - SPINNER_DELAY + 'ms' } })))
 }
 
 async function previewMock(method, urlMask) {
@@ -759,11 +798,11 @@ async function previewMock(method, urlMask) {
 			signal: previewMock.controller.signal
 		})
 		clearTimeout(spinnerTimer)
-		const file = state.fileFor(method, urlMask)
-		if (file === '')
-			await updatePayloadViewer(STR_PROXIED, response)
+		const { proxied, file } = store.brokerFor(method, urlMask).currentMock
+		if (proxied)
+			await updatePayloadViewer(true, '', response)
 		else if (file)
-			await updatePayloadViewer(file, response)
+			await updatePayloadViewer(false, file, response)
 		else {/* e.g. selected was deleted */}
 	}
 	catch (err) {
@@ -772,11 +811,11 @@ async function previewMock(method, urlMask) {
 	}
 }
 
-async function updatePayloadViewer(file, response) {
+async function updatePayloadViewer(proxied, file, response) {
 	const mime = response.headers.get('content-type') || ''
 
 	payloadViewerTitleRef.current.replaceChildren(
-		file === STR_PROXIED
+		proxied
 			? PayloadViewerTitleWhenProxied({
 				mime,
 				status: response.status,
@@ -790,9 +829,7 @@ async function updatePayloadViewer(file, response) {
 
 	if (mime.startsWith('image/'))  // Naively assumes GET.200
 		payloadViewerCodeRef.current.replaceChildren(
-			r('img', {
-				src: URL.createObjectURL(await response.blob())
-			}))
+			r('img', { src: URL.createObjectURL(await response.blob()) }))
 	else {
 		const body = await response.text() || t`/* Empty Response Body */`
 		if (mime === 'application/json')
@@ -810,55 +847,11 @@ function isXML(mime) {
 }
 
 
-function initKeyboardNavigation() {
-	addEventListener('keydown', onKeyDown)
-
-	function onKeyDown(event) {
-		const pivot = document.activeElement
-		switch (event.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()
-				}
-				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()
-				}
-				break
-			}
-		}
-	}
-
-	function rowFocusable(el, step) {
-		const row = el.closest('tr')
-		if (row) {
-			const focusables = Array.from(row.querySelectorAll('a, input, select:not(:disabled)'))
-			return circularAdjacent(step, focusables, el)
-		}
-	}
-
-	function allInFocusGroup(focusGroup) {
-		return Array.from(document.querySelectorAll(
-			`body > main > .${CSS.leftSide} table > tr > td [data-focus-group="${focusGroup}"]:is(input, a)`))
-	}
-
-	function circularAdjacent(step = 1, arr, pivot) {
-		return arr[(arr.indexOf(pivot) + step + arr.length) % arr.length]
-	}
-}
-
 /** # Error */
 
 async function parseError(response) {
 	if (response.ok)
-		return
+		return response
 	if (response.status === 422)
 		throw await response.text()
 	throw response.statusText
@@ -935,7 +928,7 @@ function initRealTimeUpdates() {
 				if (oldSyncVersion !== syncVersion) { // because it could be < or >
 					oldSyncVersion = syncVersion
 					if (!skipUpdate)
-						await updateState()
+						await fetchState()
 				}
 				poll()
 			}
@@ -949,6 +942,50 @@ function initRealTimeUpdates() {
 	}
 }
 
+function initKeyboardNavigation() {
+	addEventListener('keydown', onKeyDown)
+
+	function onKeyDown(event) {
+		const pivot = document.activeElement
+		switch (event.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()
+				}
+				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()
+				}
+				break
+			}
+		}
+	}
+
+	function rowFocusable(el, step) {
+		const row = el.closest('tr')
+		if (row) {
+			const focusables = Array.from(row.querySelectorAll('a, input, select:not(:disabled)'))
+			return circularAdjacent(step, focusables, el)
+		}
+	}
+
+	function allInFocusGroup(focusGroup) {
+		return Array.from(document.querySelectorAll(
+			`body > main > .${CSS.leftSide} table > tr > td [data-focus-group="${focusGroup}"]:is(input, a)`))
+	}
+
+	function circularAdjacent(step = 1, arr, pivot) {
+		return arr[(arr.indexOf(pivot) + step + arr.length) % arr.length]
+	}
+}
+
 
 /** # Utils */
 
@@ -1115,7 +1152,6 @@ dittoSplitPaths.test = function () {
 }
 
 
-
 function syntaxJSON(json) {
 	const MAX_NODES = 50_000
 	let nNodes = 0
@@ -1163,7 +1199,6 @@ syntaxJSON.regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s
 // Capture group order: [string, optional colon, punc]
 
 
-
 function syntaxXML(xml) {
 	const MAX_NODES = 50_000
 	let nNodes = 0

package/src/MockBroker.js

@@ -10,15 +10,17 @@ export class MockBroker {
 		this.mocks = []
 		this.currentMock = {
 			file: '',
-			delayed: false
+			delayed: false,
+			proxied: false
 		}
 		this.register(file)
 	}
 
 	get file() { return this.currentMock.file }
-	get status() { return parseFilename(this.file).status }
 	get delayed() { return this.currentMock.delayed }
-	get proxied() { return !this.currentMock.file }
+	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) }
@@ -80,25 +82,18 @@ export class MockBroker {
 	}
 
 	selectFile(filename) {
+		this.currentMock.proxied = false
 		this.currentMock.file = filename
 	}
-	
+
 	toggle500() {
 		this.#is500(this.currentMock.file)
 			? this.selectDefaultFile()
 			: this.selectFile(this.mocks.find(this.#is500))
 	}
 
-	setDelayed(delayed) {
-		this.currentMock.delayed = delayed
-	}
-
-	setProxied(proxied) {
-		if (proxied)
-			this.selectFile('')
-		else
-			this.selectDefaultFile()
-	}
+	setDelayed(delayed) { this.currentMock.delayed = delayed }
+	setProxied(proxied) { this.currentMock.proxied = proxied }
 
 	setByMatchingComment(comment) {
 		for (const file of this.mocks)

package/src/MockDispatcher.js

@@ -13,15 +13,19 @@ import { sendInternalServerError, sendMockNotFound } from './utils/http-response
 
 export async function dispatchMock(req, response) {
 	try {
-		let broker = mockBrokerCollection.brokerByRoute(req.method, req.url)
 		const isHead = req.method === 'HEAD'
+		
+		let broker = mockBrokerCollection.brokerByRoute(req.method, req.url)
 		if (!broker && isHead)
 			broker = mockBrokerCollection.brokerByRoute('GET', req.url)
-		if (!broker || broker.proxied) {
-			if (config.proxyFallback)
-				await proxy(req, response, broker?.delayed ? calcDelay() : 0)
-			else
-				sendMockNotFound(response)
+		
+		if (config.proxyFallback && (!broker || broker.proxied)) {
+			await proxy(req, response, broker?.delayed ? calcDelay() : 0)
+			return
+		}
+		
+		if (!broker) {
+			sendMockNotFound(response)
 			return
 		}
 

package/src/mockBrokersCollection.js

@@ -125,13 +125,6 @@ export function setMocksMatchingComment(comment) {
 		broker.setByMatchingComment(comment))
 }
 
-export function ensureAllRoutesHaveSelectedMock() {
-	forEachBroker(broker => {
-		if (broker.proxied)
-			broker.selectDefaultFile()
-	})
-}
-
 function forEachBroker(fn) {
 	for (const brokers of Object.values(collection))
 		Object.values(brokers).forEach(fn)