mockaton 10.6.1 → 10.6.3

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.6.1",
+	"version": "10.6.3",
 	"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 %-30s ;# %s\\n\", $4, $2 }'"
+		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %s ;# %s\\n\", $4, $2 }'"
 	},
 	"devDependencies": {
 		"pixaton": "1.1.3",

package/src/Dashboard.js

@@ -69,6 +69,12 @@ const state = /** @type {State} */ {
 		return Boolean(state.proxyFallback)
 	},
 
+	fileFor(method, urlMask) {
+		return state.brokersByMethod[method]?.[urlMask]?.currentMock.file
+	},
+
+	leftSideWidth: window.innerWidth / 2,
+
 	groupByMethod: initPreference('groupByMethod'),
 	toggleGroupByMethod() {
 		state.groupByMethod = !state.groupByMethod
@@ -76,10 +82,7 @@ const state = /** @type {State} */ {
 		updateState()
 	},
 
-	leftSideWidth: window.innerWidth / 2,
-
 	chosenLink: { method: '', urlMask: '' },
-	clearChosenLink() { state.setChosenLink('', '') },
 	setChosenLink(method, urlMask) {
 		state.chosenLink = { method, urlMask }
 	}
@@ -88,7 +91,7 @@ const state = /** @type {State} */ {
 
 const mockaton = new Commander(location.origin)
 updateState()
-initLongPoll()
+initRealTimeUpdates()
 initKeyboardNavigation()
 
 async function updateState() {
@@ -96,13 +99,18 @@ async function updateState() {
 		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()
 
-		findChosenLink()?.focus()
 		const { method, urlMask } = state.chosenLink
 		if (method && urlMask)
 			await previewMock(method, urlMask)
+
 	}
 	catch (error) {
 		onError(error)
@@ -167,7 +175,7 @@ function SettingsMenuTrigger() {
 
 function SettingsMenu(id) {
 	const { groupByMethod, toggleGroupByMethod } = state
-	
+
 	const firstInputRef = useRef()
 	function onToggle(event) {
 		if (event.newState === 'open')
@@ -225,13 +233,11 @@ function BulkSelector() {
 	// But this way is easier to implement, with a few hacks.
 	const firstOption = t`Pick Comment…`
 	function onChange() {
-		state.clearChosenLink()
 		const value = this.value
 		this.value = firstOption // Hack 
 		mockaton.bulkSelectByComment(value)
 			.then(parseError)
 			.then(updateState)
-			.then(() => focus(`.${CSS.BulkSelector}`))
 			.catch(onError)
 	}
 	const disabled = !comments.length
@@ -296,7 +302,6 @@ function ProxyFallbackField() {
 			mockaton.setProxyFallback(this.value.trim())
 				.then(parseError)
 				.then(updateState)
-				.then(() => focus(`.${CSS.FallbackBackend} input`))
 				.catch(onError)
 	}
 	return (
@@ -334,11 +339,10 @@ function SaveProxiedCheckbox(ref) {
 
 function ResetButton() {
 	function onClick() {
-		state.clearChosenLink()
+		state.setChosenLink('', '')
 		mockaton.reset()
 			.then(parseError)
 			.then(updateState)
-			.then(() => focus(`.${CSS.ResetButton}`))
 			.catch(onError)
 	}
 	return (
@@ -374,7 +378,7 @@ function MockList() {
 function Row({ method, urlMask, urlMaskDittoed, broker }, i) {
 	const { canProxy, groupByMethod } = state
 	return (
-		r('tr', { 'data-method': method, 'data-urlMask': urlMask },
+		r('tr', { key: method + '::' + urlMask },
 			canProxy && r('td', null, ProxyToggler(broker)),
 			r('td', null, DelayRouteToggler(broker)),
 			r('td', null, InternalServerErrorToggler(broker)),
@@ -627,6 +631,7 @@ function ClickDragToggler({ checked, commit, focusGroup }) {
 	}
 	function onPointerDown() {
 		this.checked = !this.checked
+		this.focus()
 		commit(this.checked)
 	}
 	function onClick(event) {
@@ -655,68 +660,69 @@ function ClickDragToggler({ checked, commit, focusGroup }) {
 
 
 function Resizer() {
+	let raf = 0
+	let initialX = 0
+	let panelWidth = 0
+
+	function onPointerDown(event) {
+		initialX = event.clientX
+		panelWidth = leftSideRef.current.clientWidth
+		addEventListener('pointerup', onUp, { once: true })
+		addEventListener('pointermove', onMove)
+		Object.assign(document.body.style, {
+			cursor: 'col-resize',
+			userSelect: 'none',
+			pointerEvents: 'none'
+		})
+	}
+
+	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'
+			raf = 0
+		})
+	}
+
+	function onUp() {
+		removeEventListener('pointermove', onMove)
+		cancelAnimationFrame(raf)
+		raf = 0
+		Object.assign(document.body.style, {
+			cursor: 'auto',
+			userSelect: 'auto',
+			pointerEvents: 'auto'
+		})
+	}
+
 	return (
 		r('div', {
 			className: CSS.Resizer,
-			onPointerDown: Resizer.onPointerDown
+			onPointerDown
 		}))
 }
-Resizer.raf = 0
-Resizer.initialX = 0
-Resizer.panelWidth = 0
-Resizer.onPointerDown = function (event) {
-	Resizer.initialX = event.clientX
-	Resizer.panelWidth = leftSideRef.current.clientWidth
-	addEventListener('pointerup', Resizer.onUp, { once: true })
-	addEventListener('pointermove', Resizer.onMove)
-	document.body.style.userSelect = 'none'
-	document.body.style.cursor = 'col-resize'
-}
-Resizer.onMove = function (event) {
-	const MIN_LEFT_WIDTH = 380
-	Resizer.raf = Resizer.raf || requestAnimationFrame(() => {
-		state.leftSideWidth = Math.max(Resizer.panelWidth - (Resizer.initialX - event.clientX), MIN_LEFT_WIDTH)
-		leftSideRef.current.style.width = state.leftSideWidth + 'px'
-		Resizer.raf = 0
-	})
-}
-Resizer.onUp = function () {
-	removeEventListener('pointermove', Resizer.onMove)
-	cancelAnimationFrame(Resizer.raf)
-	Resizer.raf = 0
-	document.body.style.userSelect = 'auto'
-	document.body.style.cursor = 'auto'
-}
 
 
 /** # Payload Preview */
 
 const payloadViewerTitleRef = useRef()
-const payloadViewerRef = useRef()
-const SPINNER_DELAY = 80
+const payloadViewerCodeRef = useRef()
 
 function PayloadViewer() {
 	return (
 		r('div', className(CSS.PayloadViewer),
 			r('h2', { ref: payloadViewerTitleRef }, t`Preview`),
 			r('pre', null,
-				r('code', { ref: payloadViewerRef }, t`Click a link to preview it`))))
-}
-
-function PayloadViewerProgressBar() {
-	return (
-		r('div', className(CSS.ProgressBar),
-			r('div', { style: { animationDuration: state.delay - SPINNER_DELAY + 'ms' } })))
+				r('code', { ref: payloadViewerCodeRef }, t`Click a link to preview it`))))
 }
 
 function PayloadViewerTitle({ file, statusText }) {
-	const tokens = file.split('.')
-	const ext = tokens.pop()
-	const status = tokens.pop()
-	const urlAndMethod = tokens.join('.') + '.'
+	const { method, status, ext } = parseFilename(file)
+	const fileNameWithComments = file.split('.').slice(0, -3).join('.')
 	return (
 		r('span', null,
-			urlAndMethod,
+			fileNameWithComments + '.' + method + '.',
 			r('abbr', { title: statusText }, status),
 			'.' + ext))
 }
@@ -731,13 +737,20 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 			' ' + mime))
 }
 
+const SPINNER_DELAY = 80
+function PayloadViewerProgressBar() {
+	return (
+		r('div', className(CSS.ProgressBar),
+			r('div', { style: { animationDuration: state.delay - SPINNER_DELAY + 'ms' } })))
+}
+
 async function previewMock(method, urlMask) {
 	previewMock.controller?.abort()
 	previewMock.controller = new AbortController
 
 	const spinnerTimer = setTimeout(() => {
 		payloadViewerTitleRef.current.replaceChildren(t`Fetching…`)
-		payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
+		payloadViewerCodeRef.current.replaceChildren(PayloadViewerProgressBar())
 	}, SPINNER_DELAY)
 
 	try {
@@ -746,46 +759,48 @@ async function previewMock(method, urlMask) {
 			signal: previewMock.controller.signal
 		})
 		clearTimeout(spinnerTimer)
-		await updatePayloadViewer(method, urlMask, response)
+		const file = state.fileFor(method, urlMask)
+		if (file === '')
+			await updatePayloadViewer(STR_PROXIED, response)
+		else if (file)
+			await updatePayloadViewer(file, response)
+		else {/* e.g. selected was deleted */}
 	}
 	catch (err) {
 		onError(err)
-		payloadViewerRef.current.replaceChildren()
+		payloadViewerCodeRef.current.replaceChildren()
 	}
 }
 
-
-async function updatePayloadViewer(method, urlMask, response) {
+async function updatePayloadViewer(file, response) {
 	const mime = response.headers.get('content-type') || ''
 
-	const file = mockSelectorFor(method, urlMask).value
-	if (file === STR_PROXIED)
-		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitleWhenProxied({
-			status: response.status,
-			statusText: response.statusText,
-			mime,
-			gatewayIsBad: response.headers.get(HEADER_FOR_502)
-		}))
-	else
-		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitle({
-			statusText: response.statusText,
-			file
-		}))
+	payloadViewerTitleRef.current.replaceChildren(
+		file === STR_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
-		payloadViewerRef.current.replaceChildren(
+	if (mime.startsWith('image/'))  // Naively assumes GET.200
+		payloadViewerCodeRef.current.replaceChildren(
 			r('img', {
 				src: URL.createObjectURL(await response.blob())
 			}))
-	}
 	else {
 		const body = await response.text() || t`/* Empty Response Body */`
 		if (mime === 'application/json')
-			payloadViewerRef.current.replaceChildren(r('span', className(CSS.json), syntaxJSON(body)))
+			payloadViewerCodeRef.current.replaceChildren(r('span', className(CSS.json), syntaxJSON(body)))
 		else if (isXML(mime))
-			payloadViewerRef.current.replaceChildren(syntaxXML(body))
+			payloadViewerCodeRef.current.replaceChildren(syntaxXML(body))
 		else
-			payloadViewerRef.current.textContent = body
+			payloadViewerCodeRef.current.textContent = body
 	}
 }
 
@@ -795,17 +810,6 @@ function isXML(mime) {
 }
 
 
-function mockSelectorFor(method, urlMask) {
-	return trFor(method, urlMask)?.querySelector(`select.${CSS.MockSelector}`)
-}
-function trFor(method, urlMask) {
-	return document.querySelector(`tr[data-method="${method}"][data-urlMask="${urlMask}"]`)
-}
-
-function focus(selector) {
-	document.querySelector(selector)?.focus()
-}
-
 function initKeyboardNavigation() {
 	addEventListener('keydown', onKeyDown)
 
@@ -825,7 +829,7 @@ function initKeyboardNavigation() {
 			case 'ArrowLeft': {
 				if (pivot.hasAttribute('data-focus-group') || pivot.classList.contains(CSS.MockSelector)) {
 					const offset = event.key === 'ArrowRight' ? +1 : -1
-					rowFocusable(pivot, offset)?.focus()
+					rowFocusable(pivot, offset).focus()
 				}
 				break
 			}
@@ -850,7 +854,7 @@ function initKeyboardNavigation() {
 	}
 }
 
-/** # Misc */
+/** # Error */
 
 async function parseError(response) {
 	if (response.ok)
@@ -882,6 +886,9 @@ function showErrorToast(msg) {
 		}, msg))
 }
 
+
+/** # Icons */
+
 function TimerIcon() {
 	return (
 		s('svg', { viewBox: '0 0 24 24' },
@@ -902,43 +909,43 @@ function SettingsIcon() {
 }
 
 /**
- * # Poll UI Sync Version
- * The version increments when a mock file is added or removed
+ * # Long polls UI sync version
+ * The version increments when a mock file is added, removed, or renamed.
  */
+function initRealTimeUpdates() {
+	let oldSyncVersion = -1
+	let controller = new AbortController()
 
-function initLongPoll() {
-	poll.oldSyncVersion = -1
-	poll.controller = new AbortController()
 	poll()
 	document.addEventListener('visibilitychange', () => {
 		if (document.hidden) {
-			poll.controller.abort('_hidden_tab_')
-			poll.controller = new AbortController()
+			controller.abort('_hidden_tab_')
+			controller = new AbortController()
 		}
 		else
 			poll()
 	})
-}
 
-async function poll() {
-	try {
-		const response = await mockaton.getSyncVersion(poll.oldSyncVersion, poll.controller.signal)
-		if (response.ok) {
-			const syncVersion = await response.json()
-			const skipUpdate = poll.oldSyncVersion === -1
-			if (poll.oldSyncVersion !== syncVersion) { // because it could be < or >
-				poll.oldSyncVersion = syncVersion
-				if (!skipUpdate)
-					await updateState()
+	async function poll() {
+		try {
+			const response = await mockaton.getSyncVersion(oldSyncVersion, 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 (!skipUpdate)
+						await updateState()
+				}
+				poll()
 			}
-			poll()
+			else
+				throw response.status
+		}
+		catch (error) {
+			if (error !== '_hidden_tab_')
+				setTimeout(poll, 3000)
 		}
-		else
-			throw response.status
-	}
-	catch (error) {
-		if (error !== '_hidden_tab_')
-			setTimeout(poll, 3000)
 	}
 }
 
@@ -951,7 +958,6 @@ function className(...args) {
 	}
 }
 
-
 function createElement(tag, props, ...children) {
 	const node = document.createElement(tag)
 	for (const [k, v] of Object.entries(props || {}))
@@ -998,6 +1004,30 @@ function deferred(cb) {
 		: setTimeout(cb, 100) // Safari
 }
 
+function selectorFor(elem) {
+	if (!(elem instanceof Element))
+		return
+
+	const path = []
+	while (elem) {
+		let qualifier = ''
+		if (elem.hasAttribute('key'))
+			qualifier = `[key="${elem.getAttribute('key')}"]`
+		else {
+			let i = 0
+			let sib = elem
+			while ((sib = sib.previousElementSibling))
+				if (sib.tagName === elem.tagName)
+					i++
+			if (i)
+				qualifier = `:nth-of-type(${i + 1})`
+		}
+		path.push(elem.tagName + qualifier)
+		elem = elem.parentElement
+	}
+	return path.reverse().join('>')
+}
+
 
 // When false, the URL will be updated with param=false
 function initPreference(param) {

package/src/DashboardHtml.js

@@ -9,23 +9,23 @@ export const CSP = [
 export const DashboardHtml = `<!DOCTYPE html>
 <html lang="en-US">
 <head>
-	<meta charset="UTF-8">
-	<base href="${API.dashboard}/">
-	
-	<link rel="stylesheet" href="Dashboard.css">
-	<script type="module" src="Dashboard.js"></script>
-	
+  <meta charset="UTF-8">
+  <base href="${API.dashboard}/">
+  
+  <link rel="stylesheet" href="Dashboard.css">
+  <script type="module" src="Dashboard.js"></script>
+  
   <link rel="preload" href="${API.state}" as="fetch" crossorigin>
   
   <link rel="modulepreload" href="ApiConstants.js">
   <link rel="modulepreload" href="ApiCommander.js">
   <link rel="modulepreload" href="Filename.js">
   <link rel="preload" href="Logo.svg" as="image">
-
-	<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="description" content="HTTP Mock Server">
-	<title>Mockaton</title>
+  
+  <link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="HTTP Mock Server">
+  <title>Mockaton</title>
 </head>
 <body>
 </body>