mockaton 10.6.0 → 10.6.2

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.6.0",
+	"version": "10.6.2",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -23,10 +23,10 @@
 		"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",
-		"puppeteer": "24.23.0"
+		"puppeteer": "24.24.1"
 	}
 }

package/src/Dashboard.css

@@ -343,7 +343,7 @@ main {
 	}
 
 	.leftSide {
-		width: 50%;
+		/* the width is set in js (it’s resizable) */
 		padding: 16px;
 		border-right: 1px solid var(--colorSecondaryActionBorder);
 		user-select: none;

package/src/Dashboard.js

@@ -69,6 +69,8 @@ const state = /** @type {State} */ {
 		return Boolean(state.proxyFallback)
 	},
 
+	leftSideWidth: window.innerWidth / 2,
+
 	groupByMethod: initPreference('groupByMethod'),
 	toggleGroupByMethod() {
 		state.groupByMethod = !state.groupByMethod
@@ -76,12 +78,7 @@ const state = /** @type {State} */ {
 		updateState()
 	},
 
-	leftSideWidth: undefined,
-
 	chosenLink: { method: '', urlMask: '' },
-	clearChosenLink() {
-		state.chosenLink = { method: '', urlMask: '' }
-	},
 	setChosenLink(method, urlMask) {
 		state.chosenLink = { method, urlMask }
 	}
@@ -90,7 +87,7 @@ const state = /** @type {State} */ {
 
 const mockaton = new Commander(location.origin)
 updateState()
-initLongPoll()
+initRealTimeUpdates()
 initKeyboardNavigation()
 
 async function updateState() {
@@ -98,12 +95,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())
-		findChosenLink()?.focus()
+		if (focusedElem)
+			document.querySelector(focusedElem)?.focus()
+
 		const { method, urlMask } = state.chosenLink
 		if (method && urlMask)
 			await previewMock(method, urlMask)
+
 	}
 	catch (error) {
 		onError(error)
@@ -168,18 +171,25 @@ function SettingsMenuTrigger() {
 
 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
+				className: CSS.SettingsMenu,
+				onToggle
 			},
 
 			r('label', className(CSS.GroupByMethod),
 				r('input', {
+					ref: firstInputRef,
 					type: 'checkbox',
 					checked: groupByMethod,
-					// autofocus: true, // TODO
 					onChange: toggleGroupByMethod
 				}),
 				r('span', null, t`Group by Method`)),
@@ -219,13 +229,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
@@ -290,7 +298,6 @@ function ProxyFallbackField() {
 			mockaton.setProxyFallback(this.value.trim())
 				.then(parseError)
 				.then(updateState)
-				.then(() => focus(`.${CSS.FallbackBackend} input`))
 				.catch(onError)
 	}
 	return (
@@ -328,11 +335,9 @@ function SaveProxiedCheckbox(ref) {
 
 function ResetButton() {
 	function onClick() {
-		state.clearChosenLink()
 		mockaton.reset()
 			.then(parseError)
 			.then(updateState)
-			.then(() => focus(`.${CSS.ResetButton}`))
 			.catch(onError)
 	}
 	return (
@@ -368,7 +373,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)),
@@ -621,6 +626,7 @@ function ClickDragToggler({ checked, commit, focusGroup }) {
 	}
 	function onPointerDown() {
 		this.checked = !this.checked
+		this.focus()
 		commit(this.checked)
 	}
 	function onClick(event) {
@@ -649,38 +655,48 @@ 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 */
@@ -752,7 +768,9 @@ async function previewMock(method, urlMask) {
 async function updatePayloadViewer(method, urlMask, response) {
 	const mime = response.headers.get('content-type') || ''
 
-	const file = mockSelectorFor(method, urlMask).value
+	const file = mockSelectorFor(method, urlMask)?.value
+	if (!file)
+		return // e.g. selected was deleted
 	if (file === STR_PROXIED)
 		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitleWhenProxied({
 			status: response.status,
@@ -789,19 +807,11 @@ function isXML(mime) {
 }
 
 
-function trFor(method, urlMask) {
-	return document.querySelector(`tr[data-method="${method}"][data-urlMask="${urlMask}"]`)
-}
-function linkFor(method, urlMask) {
-	return trFor(method, urlMask)?.querySelector(`a.${CSS.PreviewLink}`)
-}
 function mockSelectorFor(method, urlMask) {
-	return trFor(method, urlMask)?.querySelector(`select.${CSS.MockSelector}`)
+	const tr = document.querySelector(`tr[key="${method}::${urlMask}"]`)
+	return tr?.querySelector(`.${CSS.MockSelector}`)
 }
 
-function focus(selector) {
-	document.querySelector(selector)?.focus()
-}
 
 function initKeyboardNavigation() {
 	addEventListener('keydown', onKeyDown)
@@ -822,7 +832,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
 			}
@@ -847,7 +857,7 @@ function initKeyboardNavigation() {
 	}
 }
 
-/** # Misc */
+/** # Error */
 
 async function parseError(response) {
 	if (response.ok)
@@ -879,6 +889,9 @@ function showErrorToast(msg) {
 		}, msg))
 }
 
+
+/** # Icons */
+
 function TimerIcon() {
 	return (
 		s('svg', { viewBox: '0 0 24 24' },
@@ -899,43 +912,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)
 	}
 }
 
@@ -948,7 +961,6 @@ function className(...args) {
 	}
 }
 
-
 function createElement(tag, props, ...children) {
 	const node = document.createElement(tag)
 	for (const [k, v] of Object.entries(props || {}))
@@ -995,6 +1007,30 @@ function deferred(cb) {
 		: setTimeout(cb, 100) // Safari
 }
 
+function selectorFor(elem) {
+	if (!(elem instanceof Element))
+		return
+
+	const path = []
+	while (elem) {
+		let mod = ''
+		if (elem.hasAttribute('key'))
+			mod = `[key="${elem.getAttribute('key')}"]`
+		else {
+			let i = 0
+			let sib = elem
+			while ((sib = sib.previousElementSibling))
+				if (sib.nodeName === elem.nodeName)
+					i++
+			if (i)
+				mod = `:nth-of-type(${i + 1})`
+		}
+		path.push(elem.nodeName + mod)
+		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>