mockaton 10.7.0 → 11.0.0

package/Makefile

@@ -0,0 +1,33 @@
+start:
+	@node src/cli.js
+
+watch:
+	@node --watch src/cli.js
+
+
+test:
+	node --test 'src/**/*.test.js'
+
+test-docker:
+	docker run --rm -it \
+		-v "$$PWD":/app \
+		-w /app \
+		node:24 \
+		make test
+
+coverage:
+	node --test --experimental-test-coverage \
+		--test-reporter=spec --test-reporter-destination=stdout \
+		--test-reporter=lcov --test-reporter-destination=lcov.info \
+		'src/**/*.test.js'
+
+pixaton:
+	node --test --experimental-test-isolation=none \
+		--import=./pixaton-tests/_setup.js \
+		'pixaton-tests/**/*.test.js'
+
+outdated:
+	@npm outdated --parseable |\
+		awk -F: '{ printf "npm i %-30s ;# %s\n", $$4, $$2 }'
+
+.PHONY: *

package/README.md

@@ -10,33 +10,6 @@
 An HTTP mock server for simulating APIs with minimal setup
 — ideal for testing difficult to reproduce states.
 
-<br/>
-
-## Motivation
-
-**No API state should be too hard to test.**
-With Mockaton, developers can achieve correctness and speed.
-
-### Correctness
-- Enables testing of complex scenarios that would otherwise be skipped. e.g.,
-  - Triggering errors on third-party APIs. 
-  - Triggering errors on your project’s backend (if you are a frontend developer).
-- Allows for deterministic, comprehensive, and consistent state.
-  - Spot inadvertent regressions during development.
-  - Use it to set up screenshot tests, e.g., with [pixaton](https://github.com/ericfortis/pixaton).
-
-### Speed
-- Works around unstable dev backends while developing UIs.
-  - Spinning up development infrastructure.
-  - Syncing database states.
-- Prevents progress from being blocked by waiting for APIs.
-- Time travel. If you commit the mocks to your repo, 
-  you don’t have to downgrade backends for:
-  - checking out long-lived branches 
-  - bisecting bugs
-
-<br/>
-
 ## Overview
 With Mockaton, you don’t need to write code for wiring up your
 mocks. Instead, a given directory is scanned for filenames
@@ -118,6 +91,31 @@ checking ✅ **Save Mocks**, you can collect the responses that hit your backend
 They will be saved in your `config.mocksDir` following the filename convention.
 </details>
 
+<br/>
+
+## Motivation
+
+**No API state should be too hard to test.**
+With Mockaton, developers can achieve correctness and speed.
+
+### Correctness
+- Enables testing of complex scenarios that would otherwise be skipped. e.g.,
+  - Triggering errors on third-party APIs.
+  - Triggering errors on your project’s backend (if you are a frontend developer).
+- Allows for deterministic, comprehensive, and consistent state.
+  - Spot inadvertent regressions during development.
+  - Use it to set up screenshot tests, e.g., with [pixaton](https://github.com/ericfortis/pixaton).
+
+### Speed
+- Works around unstable dev backends while developing UIs.
+  - Spinning up development infrastructure.
+  - Syncing database states.
+- Prevents progress from being blocked by waiting for APIs.
+- Time travel. If you commit the mocks to your repo,
+  you don’t have to downgrade backends for:
+  - checking out long-lived branches
+  - bisecting bugs
+
 
 <br/>
 

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.7.0",
+	"version": "11.0.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -18,12 +18,7 @@
 		"mockaton": "src/cli.js"
 	},
 	"scripts": {
-		"test": "node --test 'src/**/*.test.js'",
-		"coverage": "node --test --test-reporter=lcov --test-reporter-destination=lcov.info --experimental-test-coverage 'src/**/*.test.js'",
-		"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 %-30s ;# %s\\n\", $4, $2 }'"
+		"start": "make start"
 	},
 	"devDependencies": {
 		"pixaton": "1.1.3",

package/src/Api.js

@@ -12,17 +12,21 @@ import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 import { config, ConfigValidator } from './config.js'
 import { DashboardHtml, CSP } from './DashboardHtml.js'
-import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 import { sendOK, sendJSON, sendUnprocessableContent, sendFile, sendHTML } from './utils/http-response.js'
+import { API, LONG_POLL_SERVER_TIMEOUT, HEADER_FOR_SYNC_VERSION } from './ApiConstants.js'
 
 
 export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
 	...[
+		'Logo.svg',
 		'Dashboard.css',
+		'ApiCommander.js',
+		'ApiConstants.js',
 		'Dashboard.js',
-		'ApiCommander.js', 'ApiConstants.js', 'DashboardDom.js', 'DashboardStore.js', 'Filename.js', 
-		'Logo.svg'
+		'DashboardDom.js',
+		'DashboardStore.js',
+		'Filename.js'
 	].map(f => [API.dashboard + '/' + f, serveStatic(f)]),
 
 	[API.state, getState],
@@ -57,6 +61,7 @@ function serveStatic(f) {
 	return (_, response) => sendFile(response, join(import.meta.dirname, f))
 }
 
+
 function getState(_, response) {
 	sendJSON(response, {
 		cookies: cookie.list(),
@@ -74,12 +79,14 @@ function getState(_, response) {
 	})
 }
 
+
 function longPollClientSyncVersion(req, response) {
-	if (uiSyncVersion.version !== Number(req.headers[DF.syncVersion])) {
+	if (uiSyncVersion.version !== Number(req.headers[HEADER_FOR_SYNC_VERSION])) {
 		// e.g., tab was hidden while new mocks were added or removed
 		sendJSON(response, uiSyncVersion.version)
 		return
 	}
+
 	function onAddOrRemoveMock() {
 		uiSyncVersion.unsubscribe(onAddOrRemoveMock)
 		sendJSON(response, uiSyncVersion.version)
@@ -102,16 +109,21 @@ function reinitialize(_, response) {
 	sendOK(response)
 }
 
+
 async function selectCookie(req, response) {
-	const error = cookie.setCurrent(await parseJSON(req))
+	const label = await parseJSON(req)
+
+	const error = cookie.setCurrent(label)
 	if (error)
 		sendUnprocessableContent(response, error?.message || error)
 	else
 		sendJSON(response, cookie.list())
 }
 
+
 async function selectMock(req, response) {
 	const file = await parseJSON(req)
+
 	const broker = mockBrokersCollection.brokerByFilename(file)
 	if (!broker || !broker.hasMock(file))
 		sendUnprocessableContent(response, `Missing Mock: ${file}`)
@@ -121,28 +133,26 @@ async function selectMock(req, response) {
 	}
 }
 
+
 async function toggle500(req, response) {
-	const body = await parseJSON(req)
-	const broker = mockBrokersCollection.brokerByRoute(
-		body[DF.routeMethod],
-		body[DF.routeUrlMask])
+	const [method, urlMask] = await parseJSON(req)
+
+	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Route does not exist: ${method} ${urlMask}`)
 	else {
 		broker.toggle500()
 		sendJSON(response, broker)
 	}
 }
 
+
 async function setRouteIsDelayed(req, response) {
-	const body = await parseJSON(req)
-	const delayed = body[DF.delayed]
-	const broker = mockBrokersCollection.brokerByRoute(
-		body[DF.routeMethod],
-		body[DF.routeUrlMask])
+	const [method, urlMask, delayed] = await parseJSON(req)
 
+	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Route does not exist: ${method} ${urlMask}`)
 	else if (typeof delayed !== 'boolean')
 		sendUnprocessableContent(response, `Expected boolean for "delayed"`)
 	else {
@@ -151,15 +161,13 @@ async function setRouteIsDelayed(req, response) {
 	}
 }
 
+
 async function setRouteIsProxied(req, response) {
-	const body = await parseJSON(req)
-	const proxied = body[DF.proxied]
-	const broker = mockBrokersCollection.brokerByRoute(
-		body[DF.routeMethod],
-		body[DF.routeUrlMask])
+	const [method, urlMask, proxied] = await parseJSON(req)
 
+	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Route does not exist: ${method} ${urlMask}`)
 	else if (typeof proxied !== 'boolean')
 		sendUnprocessableContent(response, `Expected boolean for "proxied"`)
 	else if (proxied && !config.proxyFallback)
@@ -170,59 +178,70 @@ async function setRouteIsProxied(req, response) {
 	}
 }
 
+
 async function updateProxyFallback(req, response) {
 	const fallback = await parseJSON(req)
-	if (!ConfigValidator.proxyFallback(fallback)) {
+
+	if (!ConfigValidator.proxyFallback(fallback))
 		sendUnprocessableContent(response, `Invalid Proxy Fallback URL`)
-		return
+	else {
+		config.proxyFallback = fallback
+		sendOK(response)
 	}
-	config.proxyFallback = fallback
-	sendOK(response)
 }
 
+
 async function setCollectProxied(req, response) {
 	const collectProxied = await parseJSON(req)
-	if (!ConfigValidator.collectProxied(collectProxied)) {
+
+	if (!ConfigValidator.collectProxied(collectProxied))
 		sendUnprocessableContent(response, `Expected a boolean for "collectProxied"`)
-		return
+	else {
+		config.collectProxied = collectProxied
+		sendOK(response)
 	}
-	config.collectProxied = collectProxied
-	sendOK(response)
 }
 
+
 async function bulkUpdateBrokersByCommentTag(req, response) {
-	mockBrokersCollection.setMocksMatchingComment(await parseJSON(req))
+	const comment = await parseJSON(req)
+
+	mockBrokersCollection.setMocksMatchingComment(comment)
 	sendOK(response)
 }
 
+
 async function setCorsAllowed(req, response) {
 	const corsAllowed = await parseJSON(req)
-	if (!ConfigValidator.corsAllowed(corsAllowed)) {
+
+	if (!ConfigValidator.corsAllowed(corsAllowed))
 		sendUnprocessableContent(response, `Expected boolean for "corsAllowed"`)
-		return
+	else {
+		config.corsAllowed = corsAllowed
+		sendOK(response)
 	}
-	config.corsAllowed = corsAllowed
-	sendOK(response)
 }
 
+
 async function setGlobalDelay(req, response) {
 	const delay = await parseJSON(req)
-	if (!ConfigValidator.delay(delay)) {
+
+	if (!ConfigValidator.delay(delay))
 		sendUnprocessableContent(response, `Expected non-negative integer for "delay"`)
-		return
+	else {
+		config.delay = delay
+		sendOK(response)
 	}
-	config.delay = delay
-	sendOK(response)
 }
 
 
+
 async function setStaticRouteStatusCode(req, response) {
-	const body = await parseJSON(req)
-	const status = Number(body[DF.statusCode])
-	const broker = staticCollection.brokerByRoute(body[DF.routeUrlMask])
+	const [urlMask, status] = await parseJSON(req)
 
+	const broker = staticCollection.brokerByRoute(urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Static route does not exist: ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Static route does not exist: ${urlMask}`)
 	else if (!(status === 200 || status === 404))
 		sendUnprocessableContent(response, `Expected 200 or 404 status code`)
 	else {
@@ -231,13 +250,13 @@ async function setStaticRouteStatusCode(req, response) {
 	}
 }
 
+
 async function setStaticRouteIsDelayed(req, response) {
-	const body = await parseJSON(req)
-	const delayed = body[DF.delayed]
-	const broker = staticCollection.brokerByRoute(body[DF.routeUrlMask])
+	const [urlMask, delayed] = await parseJSON(req)
 
+	const broker = staticCollection.brokerByRoute(urlMask)
 	if (!broker)
-		sendUnprocessableContent(response, `Static route does not exist: ${body[DF.routeUrlMask]}`)
+		sendUnprocessableContent(response, `Static route does not exist: ${urlMask}`)
 	else if (typeof delayed !== 'boolean')
 		sendUnprocessableContent(response, `Expected boolean for "delayed"`)
 	else {

package/src/ApiCommander.js

@@ -1,4 +1,4 @@
-import { API, DF, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
+import { API, LONG_POLL_SERVER_TIMEOUT, HEADER_FOR_SYNC_VERSION } from './ApiConstants.js'
 
 
 /** Client for controlling Mockaton via its HTTP API */
@@ -27,7 +27,7 @@ export class Commander {
 				AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)
 			]),
 			headers: {
-				[DF.syncVersion]: currSyncVer
+				[HEADER_FOR_SYNC_VERSION]: currSyncVer
 			}
 		})
 
@@ -40,45 +40,28 @@ export class Commander {
 		return this.#patch(API.select, file)
 	}
 
-	toggle500(routeMethod, routeUrlMask) {
-		return this.#patch(API.toggle500, {
-			[DF.routeMethod]: routeMethod,
-			[DF.routeUrlMask]: routeUrlMask
-		})
+	toggle500(method, urlMask) {
+		return this.#patch(API.toggle500, [method, urlMask])
 	}
 
 	bulkSelectByComment(comment) {
 		return this.#patch(API.bulkSelect, comment)
 	}
 
-	setRouteIsDelayed(routeMethod, routeUrlMask, delayed) {
-		return this.#patch(API.delay, {
-			[DF.routeMethod]: routeMethod,
-			[DF.routeUrlMask]: routeUrlMask,
-			[DF.delayed]: delayed
-		})
+	setRouteIsDelayed(method, urlMask, delayed) {
+		return this.#patch(API.delay, [method, urlMask, delayed])
 	}
 
-	setStaticRouteIsDelayed(routeUrlMask, delayed) {
-		return this.#patch(API.delayStatic, {
-			[DF.routeUrlMask]: routeUrlMask,
-			[DF.delayed]: delayed
-		})
+	setStaticRouteIsDelayed(urlMask, delayed) {
+		return this.#patch(API.delayStatic, [urlMask, delayed])
 	}
 
-	setStaticRouteStatus(routeUrlMask, status) {
-		return this.#patch(API.staticStatus, {
-			[DF.routeUrlMask]: routeUrlMask,
-			[DF.statusCode]: status
-		})
+	setStaticRouteStatus(urlMask, status) {
+		return this.#patch(API.staticStatus, [urlMask, status])
 	}
 
-	setRouteIsProxied(routeMethod, routeUrlMask, proxied) {
-		return this.#patch(API.proxied, {
-			[DF.routeMethod]: routeMethod,
-			[DF.routeUrlMask]: routeUrlMask,
-			[DF.proxied]: proxied
-		})
+	setRouteIsProxied(method, urlMask, proxied) {
+		return this.#patch(API.proxied, [method, urlMask, proxied])
 	}
 
 	selectCookie(cookieKey) {

package/src/ApiConstants.js

@@ -19,16 +19,9 @@ export const API = {
 	toggle500: MOUNT + '/toggle500'
 }
 
-export const DF = { // Dashboard Fields (XHR)
-	routeMethod: 'route_method',
-	routeUrlMask: 'route_url_mask',
-	delayed: 'delayed',
-	proxied: 'proxied',
-	statusCode: 'status_code',
-	syncVersion: 'last_received_sync_version'
-}
-
 export const HEADER_FOR_502 = 'Mockaton502'
+export const HEADER_FOR_SYNC_VERSION = 'sync_version'
+
 export const DEFAULT_MOCK_COMMENT = '(default)'
 export const EXT_FOR_UNKNOWN_MIME = 'unknown'
 export const LONG_POLL_SERVER_TIMEOUT = 8_000

package/src/Dashboard.css

@@ -369,7 +369,7 @@ table {
 	> tr:first-child > th {
 		border-top: 0;
 	}
-	
+
 	tr.animIn {
 		opacity: 0;
 		transform: scaleY(0);

package/src/Dashboard.js

@@ -1,7 +1,7 @@
-import { createElement as r, createSvgElement as s, className, restoreFocus, Defer, Fragment, useRef } from './DashboardDom.js'
-import { store, BrokerRowModel } from './DashboardStore.js'
+import { createElement as r, createSvgElement as s, className, restoreFocus, Defer, Fragment } from './DashboardDom.js'
 import { HEADER_FOR_502 } from './ApiConstants.js'
 import { parseFilename } from './Filename.js'
+import { store } from './DashboardStore.js'
 
 
 const CSS = {
@@ -56,6 +56,8 @@ const FocusGroup = {
 	PreviewLink: 3
 }
 
+const t = translation => translation[0]
+
 store.onError = onError
 store.render = render
 store.renderRow = renderRow
@@ -71,9 +73,8 @@ function render() {
 }
 render.count = 0
 
-const t = translation => translation[0]
 
-const leftSideRef = useRef()
+const leftSideRef = {}
 
 function App() {
 	return [
@@ -81,14 +82,14 @@ function App() {
 		r('main', null,
 			r('div', {
 					ref: leftSideRef,
-					style: { width: store.leftSideWidth + 'px' },
+					style: { width: leftSideRef.width },
 					className: CSS.leftSide
 				},
 				r('table', null,
 					MockList(),
 					StaticFilesList())),
 			r('div', { className: CSS.rightSide },
-				Resizer(),
+				Resizer(leftSideRef),
 				PayloadViewer()))
 	]
 }
@@ -159,8 +160,7 @@ function BulkSelector() {
 				},
 				r('option', { value: firstOption }, firstOption),
 				r('hr'),
-				comments.map(value => r('option', { value }, value))
-			)))
+				comments.map(value => r('option', { value }, value)))))
 }
 
 function CookieSelector() {
@@ -181,9 +181,9 @@ function CookieSelector() {
 
 
 function ProxyFallbackField() {
-	const checkboxRef = useRef()
+	const checkboxRef = {}
 	function onChange() {
-		checkboxRef.current.disabled = !this.validity.valid || !this.value.trim()
+		checkboxRef.elem.disabled = !this.validity.valid || !this.value.trim()
 		if (!this.validity.valid)
 			this.reportValidity()
 		else
@@ -239,7 +239,7 @@ function SettingsMenuTrigger() {
 }
 
 function SettingsMenu(id) {
-	const firstInputRef = useRef()
+	const firstInputRef = {}
 	return (
 		r('menu', {
 				id,
@@ -247,7 +247,7 @@ function SettingsMenu(id) {
 				className: CSS.SettingsMenu,
 				onToggle(event) {
 					if (event.newState === 'open')
-						firstInputRef.current.focus()
+						firstInputRef.elem.focus()
 				}
 			},
 
@@ -307,8 +307,7 @@ function Row(row, i) {
 					method,
 					urlMask,
 					!row.proxied && row.status === 500, // checked
-					row.opts.length === 1 && row.status === 500 // disabled
-				)),
+					row.opts.length === 1 && row.status === 500)), // disabled
 
 			!store.groupByMethod && r('td', className(CSS.Method),
 				method),
@@ -329,10 +328,10 @@ function renderRow(method, urlMask) {
 	})
 
 	function trFor(key) {
-		return leftSideRef.current.querySelector(`tr[key="${key}"]`)
+		return leftSideRef.elem.querySelector(`tr[key="${key}"]`)
 	}
 	function unChooseOld() {
-		return leftSideRef.current.querySelector(`td > .${CSS.chosen}`)
+		return leftSideRef.elem.querySelector(`td > a.${CSS.chosen}`)
 			?.classList.remove(CSS.chosen)
 	}
 }
@@ -522,14 +521,14 @@ function ClickDragToggler({ checked, commit, focusGroup }) {
 			TimerIcon()))
 }
 
-function Resizer() {
+function Resizer(ref) {
 	let raf = 0
 	let initialX = 0
-	let panelWidth = 0
+	let initialWidth = 0
 
 	function onPointerDown(event) {
 		initialX = event.clientX
-		panelWidth = leftSideRef.current.clientWidth
+		initialWidth = ref.elem.clientWidth
 		addEventListener('pointerup', onUp, { once: true })
 		addEventListener('pointermove', onMove)
 		Object.assign(document.body.style, {
@@ -542,8 +541,8 @@ function Resizer() {
 	function onMove(event) {
 		const MIN_LEFT_WIDTH = 380
 		raf = raf || requestAnimationFrame(() => {
-			store.leftSideWidth = Math.max(panelWidth - (initialX - event.clientX), MIN_LEFT_WIDTH)
-			leftSideRef.current.style.width = store.leftSideWidth + 'px'
+			ref.width = Math.max(initialWidth - (initialX - event.clientX), MIN_LEFT_WIDTH) + 'px'
+			ref.elem.style.width = ref.width
 			raf = 0
 		})
 	}
@@ -569,8 +568,8 @@ function Resizer() {
 
 /** # Payload Preview */
 
-const payloadViewerTitleRef = useRef()
-const payloadViewerCodeRef = useRef()
+const payloadViewerTitleRef = {}
+const payloadViewerCodeRef = {}
 
 function PayloadViewer() {
 	return (
@@ -582,7 +581,7 @@ function PayloadViewer() {
 					!store.hasChosenLink && t`Click a link to preview it`))))
 }
 
-function PayloadViewerTitle({ file, statusText }) {
+function PayloadViewerTitle(file, statusText) {
 	const { method, status, ext } = parseFilename(file)
 	const fileNameWithComments = file.split('.').slice(0, -3).join('.')
 	return (
@@ -592,13 +591,15 @@ function PayloadViewerTitle({ file, statusText }) {
 			'.' + ext))
 }
 
-function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad }) {
+function PayloadViewerTitleWhenProxied(response) {
+	const mime = response.headers.get('content-type') || ''
+	const badGateway = response.headers.get(HEADER_FOR_502)
 	return (
 		r('span', null,
-			gatewayIsBad
+			badGateway
 				? r('span', null, t`⛔ Fallback Backend Error` + ' ')
 				: r('span', null, t`Got` + ' '),
-			r('abbr', { title: statusText }, status),
+			r('abbr', { title: response.statusText }, response.status),
 			' ' + mime))
 }
 
@@ -616,8 +617,8 @@ async function previewMock() {
 	previewMock.controller = new AbortController
 
 	const spinnerTimer = setTimeout(() => {
-		payloadViewerTitleRef.current.replaceChildren(t`Fetching…`)
-		payloadViewerCodeRef.current.replaceChildren(PayloadViewerProgressBar())
+		payloadViewerTitleRef.elem.replaceChildren(t`Fetching…`)
+		payloadViewerCodeRef.elem.replaceChildren(PayloadViewerProgressBar())
 	}, SPINNER_DELAY)
 
 	try {
@@ -631,37 +632,29 @@ async function previewMock() {
 			await updatePayloadViewer(proxied, file, response)
 	}
 	catch {
-		payloadViewerCodeRef.current.replaceChildren()
+		payloadViewerCodeRef.elem.replaceChildren()
 	}
 }
 
 async function updatePayloadViewer(proxied, file, response) {
 	const mime = response.headers.get('content-type') || ''
 
-	payloadViewerTitleRef.current.replaceChildren(
-		proxied
-			? PayloadViewerTitleWhenProxied({
-				mime,
-				status: response.status,
-				statusText: response.statusText,
-				gatewayIsBad: response.headers.get(HEADER_FOR_502)
-			})
-			: PayloadViewerTitle({
-				file,
-				statusText: response.statusText
-			}))
-
-	if (mime.startsWith('image/'))  // Naively assumes GET.200
-		payloadViewerCodeRef.current.replaceChildren(
-			r('img', { src: URL.createObjectURL(await response.blob()) }))
+	payloadViewerTitleRef.elem.replaceChildren(proxied
+		? PayloadViewerTitleWhenProxied(response)
+		: PayloadViewerTitle(file, response.statusText))
+
+	if (mime.startsWith('image/')) // Naively assumes GET 200
+		payloadViewerCodeRef.elem.replaceChildren(r('img', {
+			src: URL.createObjectURL(await response.blob())
+		}))
 	else {
 		const body = await response.text() || t`/* Empty Response Body */`
 		if (mime === 'application/json')
-			payloadViewerCodeRef.current.replaceChildren(r('span', className(CSS.json), SyntaxJSON(body)))
+			payloadViewerCodeRef.elem.replaceChildren(r('span', className(CSS.json), SyntaxJSON(body)))
 		else if (isXML(mime))
-			payloadViewerCodeRef.current.replaceChildren(SyntaxXML(body))
+			payloadViewerCodeRef.elem.replaceChildren(SyntaxXML(body))
 		else
-			payloadViewerCodeRef.current.textContent = body
+			payloadViewerCodeRef.elem.textContent = body
 	}
 }
 
@@ -671,38 +664,47 @@ function isXML(mime) {
 }
 
 
-async function onError(_error) {
-	let error = _error
+async function onError(error) {
+	if (error?.name === 'AbortError')
+		return
 
-	if (_error instanceof Response) {
-		if (_error.status === 422)
-			error = await _error.text()
-		else if (_error.statusText)
-			error = _error.statusText
+	let msg = ''
+	let isOffline = false
+
+	if (error instanceof Response) {
+		if (error.status === 422)
+			msg = await error.text()
+		else if (error.statusText)
+			msg = error.statusText
 	}
-	else {
-		if (error?.name === 'AbortError')
-			return
-		if (error?.message === 'Failed to fetch')
-			error = t`Looks like the Mockaton server is not running` // TODO clear Error if comes back in ui-sync
-		else
-			error = error || t`Unexpected Error`
+	else if (error?.message === 'Failed to fetch') {
+		msg = t`Looks like the Mockaton server is not running`
+		isOffline = true
 	}
-	showErrorToast(error)
-	console.error(_error)
+	else
+		msg = error?.message || t`Unexpected Error`
+
+	ErrorToast(msg, isOffline)
+	console.error(error)
 }
 
-function showErrorToast(msg) {
-	document.getElementsByClassName(CSS.ErrorToast)[0]?.remove()
+function ErrorToast(msg, isOffline) {
+	ErrorToast.isOffline = isOffline
+	ErrorToast.ref.elem?.remove()
 	document.body.appendChild(
 		r('div', {
+			role: 'alert',
+			ref: ErrorToast.ref,
 			className: CSS.ErrorToast,
-			onClick() {
-				const toast = this
-				document.startViewTransition(() => toast.remove())
-			}
+			onClick: ErrorToast.close
 		}, msg))
 }
+ErrorToast.isOffline = false
+ErrorToast.ref = {}
+ErrorToast.close = () => {
+	document.startViewTransition(() =>
+		ErrorToast.ref.elem?.remove())
+}
 
 
 /** # Icons */
@@ -732,7 +734,7 @@ function SettingsIcon() {
  * The version increments when a mock file is added, removed, or renamed.
  */
 function initRealTimeUpdates() {
-	let oldSyncVersion = -1
+	let oldVersion = -1
 	let controller = new AbortController()
 
 	longPoll()
@@ -747,12 +749,15 @@ function initRealTimeUpdates() {
 
 	async function longPoll() {
 		try {
-			const response = await store.getSyncVersion(oldSyncVersion, controller.signal)
+			const response = await store.getSyncVersion(oldVersion, controller.signal)
 			if (response.ok) {
-				const syncVersion = await response.json()
-				const skipUpdate = oldSyncVersion === -1
-				if (oldSyncVersion !== syncVersion) { // because it could be < or >
-					oldSyncVersion = syncVersion
+				if (ErrorToast.isOffline)
+					ErrorToast.close()
+
+				const version = await response.json()
+				const skipUpdate = oldVersion === -1
+				if (oldVersion !== version) { // because it could be < or >
+					oldVersion = version
 					if (!skipUpdate)
 						store.fetchState()
 				}
@@ -804,7 +809,7 @@ function initKeyboardNavigation() {
 	}
 
 	function allInFocusGroup(focusGroup) {
-		return Array.from(leftSideRef.current.querySelectorAll(
+		return Array.from(leftSideRef.elem.querySelectorAll(
 			`tr > td [data-focus-group="${focusGroup}"]:is(input, a)`))
 	}
 

package/src/DashboardDom.js

@@ -3,15 +3,15 @@ export function className(...args) {
 }
 
 export function createElement(tag, props, ...children) {
-	const node = document.createElement(tag)
+	const elem = document.createElement(tag)
 	for (const [k, v] of Object.entries(props || {}))
-		if (k === 'ref') v.current = node
-		else if (k === 'style') Object.assign(node.style, v)
-		else if (k.startsWith('on')) node.addEventListener(k.slice(2).toLowerCase(), ...[v].flat())
-		else if (k in node) node[k] = v
-		else node.setAttribute(k, v)
-	node.append(...children.flat().filter(Boolean))
-	return node
+		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
 }
 
 export function createSvgElement(tagName, props, ...children) {
@@ -22,10 +22,6 @@ export function createSvgElement(tagName, props, ...children) {
 	return elem
 }
 
-export function useRef() {
-	return { current: null }
-}
-
 export function Fragment(...args) {
 	const frag = new DocumentFragment()
 	for (const arg of args)

package/src/DashboardStore.js

@@ -11,8 +11,8 @@ export const store = {
 	render() {},
 	renderRow(method, urlMask) {},
 
-	brokersByMethod: /** @type {State.brokersByMethod} */ {},
-	staticBrokers: /** @type {State.staticBrokers} */ {},
+	brokersByMethod: /** @type ClientBrokersByMethod */ {},
+	staticBrokers: /** @type ClientStaticBrokers */ {},
 
 	cookies: [],
 	comments: [],
@@ -37,8 +37,6 @@ export const store = {
 	},
 
 
-	leftSideWidth: undefined,
-
 	groupByMethod: initPreference('groupByMethod'),
 	toggleGroupByMethod() {
 		store.groupByMethod = !store.groupByMethod
@@ -47,17 +45,13 @@ export const store = {
 	},
 
 
-	chosenLink: {
-		method: '',
-		urlMask: ''
-	},
-	get hasChosenLink() {
-		return store.chosenLink.method
-			&& store.chosenLink.urlMask
-	},
+	chosenLink: { method: '', urlMask: '' },
 	setChosenLink(method, urlMask) {
 		store.chosenLink = { method, urlMask }
 	},
+	get hasChosenLink() {
+		return store.chosenLink.method && store.chosenLink.urlMask
+	},
 
 
 	async reset() {
@@ -277,7 +271,7 @@ function togglePreference(param, nextVal) {
  * the repeated folder paths are kept but styled differently.
  * @param {string[]} paths - sorted
  */
-export function dittoSplitPaths(paths) {
+function dittoSplitPaths(paths) {
 	const result = [['', paths[0]]]
 	const pathsInParts = paths.map(p => p.split('/').filter(Boolean))
 
@@ -327,14 +321,14 @@ dittoSplitPaths.test = function () {
 deferred(dittoSplitPaths.test)
 
 
-export class BrokerRowModel {
+class BrokerRowModel {
 	opts = /** @type {[key:string, label:string, selected:boolean][]} */ []
 	isNew = false
 	key = ''
 	method = ''
 	urlMask = ''
 	urlMaskDittoed = ['', '']
-	#broker = /** @type {ClientMockBroker} */ {}
+	#broker = /** @type ClientMockBroker */ {}
 	#canProxy = false
 
 	/**
@@ -456,12 +450,12 @@ const TestBrokerRowModel = {
 deferred(() => Object.values(TestBrokerRowModel).forEach(t => t()))
 
 
-export class StaticBrokerRowModel {
+class StaticBrokerRowModel {
 	isNew = false
 	key = ''
 	method = 'GET'
 	urlMaskDittoed = ['', '']
-	#broker = /** @type {ClientStaticBroker} */ {}
+	#broker = /** @type ClientStaticBroker */ {}
 
 	/** @param {ClientStaticBroker} broker */
 	constructor(broker) {

package/src/MockDispatcher.js

@@ -23,7 +23,6 @@ export async function dispatchMock(req, response) {
 			await proxy(req, response, broker?.delayed ? calcDelay() : 0)
 			return
 		}
-		
 		if (!broker) {
 			sendMockNotFound(response)
 			return

package/src/Watcher.js

@@ -10,7 +10,7 @@ import * as mockBrokerCollection from './mockBrokersCollection.js'
 
 /**
  * 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).
  */
@@ -44,22 +44,19 @@ export function watchMocksDir() {
 		if (!file)
 			return
 
-		const path = join(dir, file)
-
-		if (isDirectory(path)) {
+		if (isDirectory(join(dir, file))) {
 			mockBrokerCollection.init()
 			uiSyncVersion.increment()
-			return
-		}
-
-		if (isFile(path)) {
-			if (mockBrokerCollection.registerMock(file, Boolean('isFromWatcher')))
-				uiSyncVersion.increment()
 		}
-		else {
+		else if (!isFile(join(dir, file))) { // file deleted
 			mockBrokerCollection.unregisterMock(file)
 			uiSyncVersion.increment()
 		}
+		else if (mockBrokerCollection.registerMock(file, Boolean('isFromWatcher')))
+			uiSyncVersion.increment()
+		else {
+			// ignore file edits
+		}
 	})
 }
 
@@ -67,27 +64,25 @@ export function watchStaticDir() {
 	const dir = config.staticDir
 	if (!dir)
 		return
+	
 	watch(dir, { recursive: true, persistent: false }, (_, file) => {
 		if (!file)
 			return
 
-		const path = join(dir, file)
-
-		if (isDirectory(path)) {
+		if (isDirectory(join(dir, file))) {
 			staticCollection.init()
 			uiSyncVersion.increment()
-			return
-		}
-
-		if (isFile(path)) {
-			if (staticCollection.registerMock(file))
-				uiSyncVersion.increment()
 		}
-		else {
+		else if (!isFile(join(dir, file))) { // file deleted
 			staticCollection.unregisterMock(file)
 			uiSyncVersion.increment()
 		}
+		else if (staticCollection.registerMock(file))
+			uiSyncVersion.increment()
+		else {
+			// ignore file edits
+		}
 	})
 }
 
-// TODO config changes
+// TODO ThinkAbout watching for config changes

package/src/config.js

@@ -60,7 +60,7 @@ for (const [k, [defaultVal, validator]] of Object.entries(schema)) {
 	validators[k] = validator
 }
 
-/** @type {Config} */
+/** @type Config */
 export const config = Object.seal(defaults)
 
 /** @type {Record<keyof Config, (val: unknown) => val is Config[keyof Config]>} */

package/src/mockBrokersCollection.js

@@ -105,16 +105,16 @@ export function brokerByRoute(method, url) {
 
 export function extractAllComments() {
 	const comments = new Set()
-	forEachBroker(broker => {
-		for (const c of broker.extractComments())
+	forEachBroker(b => {
+		for (const c of b.extractComments())
 			comments.add(c)
 	})
 	return Array.from(comments)
 }
 
 export function setMocksMatchingComment(comment) {
-	forEachBroker(broker =>
-		broker.setByMatchingComment(comment))
+	forEachBroker(b => 
+		b.setByMatchingComment(comment))
 }
 
 function forEachBroker(fn) {

package/src/utils/mime.js

@@ -105,9 +105,9 @@ export function mimeFor(filename) {
 }
 function extname(filename) {
 	const i = filename.lastIndexOf('.')
-	return i >= 0
-		? filename.substring(i + 1)
-		: ''
+	return i === -1 
+		? '' 
+		: filename.slice(i + 1)
 }