mockaton 12.5.3 → 12.6.0

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "12.5.3",
+	"version": "12.6.0",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/app-store.js

@@ -20,23 +20,34 @@ export const store = {
 
 	collectProxied: false,
 	proxyFallback: '',
+	showProxyField: null,
 	get canProxy() {
 		return Boolean(store.proxyFallback)
 	},
 
 	getSyncVersion: api.getSyncVersion,
 
-	async fetchState() {
-		try {
-			const response = await api.getState()
+	_action(action, onSuccess) {
+		Promise.try(async () => {
+			const response = await action()
 			if (!response.ok) throw response
+			return response
+		})
+			.then(onSuccess)
+			.catch(store.onError)
+	},
+
+	async fetchState() {
+		store._action(api.getState, async response => {
 			Object.assign(store, await response.json())
+			
+			if (store.showProxyField === null) // isFirstCall
+				store.showProxyField = Boolean(store.proxyFallback)
+			
 			store.render()
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
-
 	groupByMethod: initPreference('groupByMethod'),
 	toggleGroupByMethod() {
 		store.groupByMethod = !store.groupByMethod
@@ -53,71 +64,47 @@ export const store = {
 		return store.chosenLink.method && store.chosenLink.urlMask
 	},
 
-
 	async reset() {
-		try {
-			const response = await api.reset()
-			if (!response.ok) throw response
+		store._action(api.reset, () => {
 			store.setChosenLink('', '')
-			await store.fetchState()
-		}
-		catch (error) { store.onError(error) }
+			store.fetchState()
+		})
 	},
 
 	async bulkSelectByComment(value) {
-		try {
-			const response = await api.bulkSelectByComment(value)
-			if (!response.ok) throw response
-			await store.fetchState()
-		}
-		catch (error) { store.onError(error) }
+		store._action(() => api.bulkSelectByComment(value),
+			store.fetchState)
 	},
 
-
 	async setGlobalDelay(value) {
-		try {
-			const response = await api.setGlobalDelay(value)
-			if (!response.ok) throw response
+		store._action(() => api.setGlobalDelay(value), () => {
 			store.delay = value
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 	async setGlobalDelayJitter(value) {
-		try {
-			const response = await api.setGlobalDelayJitter(value)
-			if (!response.ok) throw response
+		store._action(() => api.setGlobalDelayJitter(value), () => {
 			store.delayJitter = value
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 	async selectCookie(name) {
-		try {
-			const response = await api.selectCookie(name)
-			if (!response.ok) throw response
+		store._action(() => api.selectCookie(name), async response => {
 			store.cookies = await response.json()
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 	async setProxyFallback(value) {
-		try {
-			const response = await api.setProxyFallback(value)
-			if (!response.ok) throw response
+		store._action(() => api.setProxyFallback(value), () => {
 			store.proxyFallback = value
 			store.render()
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 	async setCollectProxied(checked) {
-		try {
-			const response = await api.setCollectProxied(checked)
-			if (!response.ok) throw response
+		store._action(() => api.setCollectProxied(checked), () => {
 			store.collectProxied = checked
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 
@@ -180,65 +167,46 @@ export const store = {
 	},
 
 	async selectFile(file) {
-		try {
-			const response = await api.select(file)
-			if (!response.ok) throw response
+		store._action(() => api.select(file), async response => {
 			const { method, urlMask } = parseFilename(file)
 			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 	async toggle500(method, urlMask) {
-		try {
-			const response = await api.toggle500(method, urlMask)
-			if (!response.ok) throw response
+		store._action(() => api.toggle500(method, urlMask), async response => {
 			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 	async setProxied(method, urlMask, checked) {
-		try {
-			const response = await api.setRouteIsProxied(method, urlMask, checked)
-			if (!response.ok) throw response
+		store._action(() => api.setRouteIsProxied(method, urlMask, checked), async response => {
 			store.setBroker(await response.json())
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 	async setDelayed(method, urlMask, checked) {
-		try {
-			const response = await api.setRouteIsDelayed(method, urlMask, checked)
-			if (!response.ok) throw response
+		store._action(() => api.setRouteIsDelayed(method, urlMask, checked), async response => {
 			store.setBroker(await response.json())
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
-
 	async setDelayedStatic(route, checked) {
-		try {
-			const response = await api.setStaticRouteIsDelayed(route, checked)
-			if (!response.ok) throw response
+		store._action(() => api.setStaticRouteIsDelayed(route, checked), () => {
 			store.staticBrokers[route].delayed = checked
-		}
-		catch (error) { store.onError(error) }
+		})
 	},
 
 	async setStaticRouteStatus(route, status) {
-		try {
-			const response = await api.setStaticRouteStatus(route, status)
-			if (!response.ok) throw response
+		store._action(() => api.setStaticRouteStatus(route, status), () => {
 			store.staticBrokers[route].status = status
-		}
-		catch (error) { store.onError(error) }
+		})
 	}
 }
 
@@ -286,20 +254,18 @@ export function dittoSplitPaths(paths) {
 	const pathsInParts = paths.map(p => p.split('/').filter(Boolean))
 
 	for (let i = 1; i < paths.length; i++) {
-		const prevParts = pathsInParts[i - 1]
-		const currParts = pathsInParts[i]
+		const prev = pathsInParts[i - 1]
+		const curr = pathsInParts[i]
 
+		const min = Math.min(curr.length, prev.length)
 		let j = 0
-		while (
-			j < currParts.length &&
-			j < prevParts.length &&
-			currParts[j] === prevParts[j])
+		while (j < min && curr[j] === prev[j])
 			j++
 
 		if (!j) // no common dirs
 			result.push(['', paths[i]])
 		else {
-			const ditto = '/' + currParts.slice(0, j).join('/') + '/'
+			const ditto = '/' + curr.slice(0, j).join('/') + '/'
 			result.push([ditto, paths[i].slice(ditto.length)])
 		}
 	}

package/src/client/app-store.test.js

@@ -1,5 +1,5 @@
 import { test } from 'node:test'
-import { deepEqual } from 'node:assert'
+import { deepEqual } from 'node:assert/strict'
 
 import { dittoSplitPaths, BrokerRowModel, t } from './app-store.js'
 

package/src/client/app.js

@@ -1,19 +1,15 @@
 import {
 	createElement as r,
 	createSvgElement as s,
-	classNames, restoreFocus, Fragment, adoptCSS
+	t, classNames, restoreFocus, Fragment, adoptCSS
 } from './dom-utils.js'
-
 import { store } from './app-store.js'
-import { parseFilename } from './Filename.js'
-import { HEADER_502 } from './ApiConstants.js'
+import { PayloadViewer, previewMock } from './payload-viewer.js'
 
-import CSS from './styles.css' with { type: 'css' }
+import CSS from './app.css' with { type: 'css' }
 adoptCSS(CSS)
 
 
-const t = translation => translation[0]
-
 store.onError = onError
 store.render = render
 store.renderRow = renderRow
@@ -69,7 +65,7 @@ function Header() {
 					GlobalDelayField(),
 					GlobalDelayJitterField()),
 				CookieSelector(),
-				ProxyFallbackField(),
+				store.showProxyField && ProxyFallbackField(),
 				ResetButton(),
 				HelpLink()
 			)))
@@ -556,115 +552,6 @@ function Resizer(ref) {
 }
 
 
-/** # Payload Preview */
-
-const payloadViewerTitleRef = {}
-const payloadViewerCodeRef = {}
-
-function PayloadViewer() {
-	return (
-		r('div', classNames(CSS.PayloadViewer),
-			RightToolbar(),
-			r('pre', null,
-				r('code', { ref: payloadViewerCodeRef },
-					!store.hasChosenLink && t`Click a link to preview it`))))
-}
-
-function RightToolbar() {
-	return (
-		r('div', classNames(CSS.SubToolbar),
-			r('h2', { ref: payloadViewerTitleRef },
-				!store.hasChosenLink && t`Preview`)))
-}
-
-
-function PayloadViewerTitle(file, statusText) {
-	const { method, status, ext } = parseFilename(file)
-	const fileNameWithComments = file.split('.').slice(0, -3).join('.')
-	return (
-		r('span', null,
-			fileNameWithComments + '.' + method + '.',
-			r('abbr', { title: statusText }, status),
-			'.' + ext))
-}
-
-function PayloadViewerTitleWhenProxied(response) {
-	const mime = response.headers.get('content-type') || ''
-	const badGateway = response.headers.get(HEADER_502)
-	return (
-		r('span', null,
-			badGateway
-				? r('span', null, t`⛔ Fallback Backend Error` + ' ')
-				: r('span', null, t`Got` + ' '),
-			r('abbr', { title: response.statusText }, response.status),
-			' ' + mime))
-}
-
-const SPINNER_DELAY = 80
-function PayloadViewerProgressBar() {
-	return (
-		r('div', classNames(CSS.ProgressBar),
-			r('div', {
-				style: {
-					animationDuration: store.delay - SPINNER_DELAY + 'ms'
-				}
-			})))
-}
-
-async function previewMock() {
-	const { method, urlMask } = store.chosenLink
-
-	previewMock.controller?.abort()
-	previewMock.controller = new AbortController
-
-	const spinnerTimer = setTimeout(() => {
-		payloadViewerTitleRef.elem.replaceChildren(t`Fetching…`)
-		payloadViewerCodeRef.elem.replaceChildren(PayloadViewerProgressBar())
-	}, SPINNER_DELAY)
-
-	try {
-		const response = await fetch(urlMask, {
-			method,
-			signal: previewMock.controller.signal
-		})
-		clearTimeout(spinnerTimer)
-		const { proxied, file } = store.brokerFor(method, urlMask)
-		if (proxied || file)
-			await updatePayloadViewer(proxied, file, response)
-	}
-	catch {
-		payloadViewerCodeRef.elem.replaceChildren()
-	}
-}
-
-async function updatePayloadViewer(proxied, file, response) {
-	const mime = response.headers.get('content-type') || ''
-
-	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.elem.replaceChildren(SyntaxJSON(body))
-		else if (isXML(mime))
-			payloadViewerCodeRef.elem.replaceChildren(SyntaxXML(body))
-		else
-			payloadViewerCodeRef.elem.textContent = body
-	}
-}
-
-function isXML(mime) {
-	return ['text/html', 'text/xml', 'application/xml'].some(m => mime.includes(m))
-		|| /application\/.*\+xml/.test(mime)
-}
-
-
 async function onError(error) {
 	if (error?.name === 'AbortError')
 		return
@@ -827,94 +714,3 @@ function initKeyboardNavigation() {
 	}
 }
 
-
-function SyntaxJSON(json) {
-	// Capture groups: [string, optional colon, punc]
-	const regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s]+)|\S+/g
-
-	const MAX_NODES = 50_000
-	let nNodes = 0
-
-	const frag = new DocumentFragment()
-
-	function span(className, textContent) {
-		nNodes++
-		const s = document.createElement('span')
-		s.className = className
-		s.textContent = textContent
-		frag.appendChild(s)
-	}
-
-	function text(t) {
-		nNodes++
-		frag.appendChild(document.createTextNode(t))
-	}
-
-	let match
-	let lastIndex = 0
-	while ((match = regex.exec(json)) !== null) {
-		if (nNodes > MAX_NODES)
-			break
-
-		if (match.index > lastIndex)
-			text(json.slice(lastIndex, match.index))
-
-		const [full, str, colon, punc] = match
-		lastIndex = match.index + full.length
-
-		if (str && colon) {
-			span(CSS.syntaxKey, str)
-			text(colon)
-		}
-		else if (punc) text(punc)
-		else if (str) span(CSS.syntaxStr, str)
-		else span(CSS.syntaxVal, full)
-	}
-	frag.normalize()
-	text(json.slice(lastIndex))
-	return frag
-}
-
-
-function SyntaxXML(xml) {
-	// Capture groups: [tagPunc, tagName, attrName, attrVal]
-	const regex = /(<\/?|\/?>|\?>)|(?<=<\??\/?)([A-Za-z_:][\w:.-]*)|([A-Za-z_:][\w:.-]*)(?==)|("(?:[^"\\]|\\.)*")/g
-
-	const MAX_NODES = 50_000
-	let nNodes = 0
-
-	const frag = new DocumentFragment()
-
-	function span(className, textContent) {
-		nNodes++
-		const s = document.createElement('span')
-		s.className = className
-		s.textContent = textContent
-		frag.appendChild(s)
-	}
-
-	function text(t) {
-		nNodes++
-		frag.appendChild(document.createTextNode(t))
-	}
-
-	let match
-	let lastIndex = 0
-	while ((match = regex.exec(xml)) !== null) {
-		if (nNodes > MAX_NODES)
-			break
-
-		if (match.index > lastIndex)
-			text(xml.slice(lastIndex, match.index))
-
-		lastIndex = match.index + match[0].length
-
-		if (match[1]) span(CSS.syntaxPunc, match[1])
-		else if (match[2]) span(CSS.syntaxTag, match[2])
-		else if (match[3]) span(CSS.syntaxAttr, match[3])
-		else if (match[4]) span(CSS.syntaxAttrVal, match[4])
-	}
-	text(xml.slice(lastIndex))
-	frag.normalize()
-	return frag
-}

package/src/client/dom-utils.js

@@ -1,3 +1,7 @@
+export function t(translation) {
+	return translation[0]
+}
+
 export function classNames(...args) {
 	return {
 		className: args.filter(Boolean).join(' ')

package/src/client/payload-viewer.js

@@ -0,0 +1,210 @@
+import {
+	createElement as r,
+	t, classNames, adoptCSS
+} from './dom-utils.js'
+import { parseFilename } from './Filename.js'
+import { HEADER_502 } from './ApiConstants.js'
+import { store } from './app-store.js'
+
+import CSS from './app.css' with { type: 'css' }
+adoptCSS(CSS)
+
+
+const payloadViewerTitleRef = {}
+const payloadViewerCodeRef = {}
+
+export function PayloadViewer() {
+	return (
+		r('div', classNames(CSS.PayloadViewer),
+			RightToolbar(),
+			r('pre', null,
+				r('code', { ref: payloadViewerCodeRef },
+					!store.hasChosenLink && t`Click a link to preview it`))))
+}
+
+function RightToolbar() {
+	return (
+		r('div', classNames(CSS.SubToolbar),
+			r('h2', { ref: payloadViewerTitleRef },
+				!store.hasChosenLink && t`Preview`)))
+}
+
+
+function PayloadViewerTitle(file, statusText) {
+	const { method, status, ext } = parseFilename(file)
+	const fileNameWithComments = file.split('.').slice(0, -3).join('.')
+	return (
+		r('span', null,
+			fileNameWithComments + '.' + method + '.',
+			r('abbr', { title: statusText }, status),
+			'.' + ext))
+}
+
+function PayloadViewerTitleWhenProxied(response) {
+	const mime = response.headers.get('content-type') || ''
+	const badGateway = response.headers.get(HEADER_502)
+	return (
+		r('span', null,
+			badGateway
+				? r('span', null, t`⛔ Fallback Backend Error` + ' ')
+				: r('span', null, t`Got` + ' '),
+			r('abbr', { title: response.statusText }, response.status),
+			' ' + mime))
+}
+
+const SPINNER_DELAY = 80
+function PayloadViewerProgressBar() {
+	return (
+		r('div', classNames(CSS.ProgressBar),
+			r('div', {
+				style: {
+					animationDuration: store.delay - SPINNER_DELAY + 'ms'
+				}
+			})))
+}
+
+export async function previewMock() {
+	const { method, urlMask } = store.chosenLink
+
+	previewMock.controller?.abort()
+	previewMock.controller = new AbortController
+
+	const spinnerTimer = setTimeout(() => {
+		payloadViewerTitleRef.elem.replaceChildren(t`Fetching…`)
+		payloadViewerCodeRef.elem.replaceChildren(PayloadViewerProgressBar())
+	}, SPINNER_DELAY)
+
+	try {
+		const response = await fetch(urlMask, {
+			method,
+			signal: previewMock.controller.signal
+		})
+		clearTimeout(spinnerTimer)
+		const { proxied, file } = store.brokerFor(method, urlMask)
+		if (proxied || file)
+			await updatePayloadViewer(proxied, file, response)
+	}
+	catch {
+		payloadViewerCodeRef.elem.replaceChildren()
+	}
+}
+
+async function updatePayloadViewer(proxied, file, response) {
+	const mime = response.headers.get('content-type') || ''
+
+	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.elem.replaceChildren(SyntaxJSON(body))
+		else if (isXML(mime))
+			payloadViewerCodeRef.elem.replaceChildren(SyntaxXML(body))
+		else
+			payloadViewerCodeRef.elem.textContent = body
+	}
+}
+
+function isXML(mime) {
+	return ['text/html', 'text/xml', 'application/xml'].some(m => mime.includes(m))
+		|| /application\/.*\+xml/.test(mime)
+}
+
+
+
+function SyntaxJSON(json) {
+	// Capture groups: [string, optional colon, punc]
+	const regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s]+)|\S+/g
+
+	const MAX_NODES = 50_000
+	let nNodes = 0
+
+	const frag = new DocumentFragment()
+
+	function span(className, textContent) {
+		nNodes++
+		const s = document.createElement('span')
+		s.className = className
+		s.textContent = textContent
+		frag.appendChild(s)
+	}
+
+	function text(t) {
+		nNodes++
+		frag.appendChild(document.createTextNode(t))
+	}
+
+	let match
+	let lastIndex = 0
+	while ((match = regex.exec(json)) !== null) {
+		if (nNodes > MAX_NODES)
+			break
+
+		if (match.index > lastIndex)
+			text(json.slice(lastIndex, match.index))
+
+		const [full, str, colon, punc] = match
+		lastIndex = match.index + full.length
+
+		if (str && colon) {
+			span(CSS.syntaxKey, str)
+			text(colon)
+		}
+		else if (punc) text(punc)
+		else if (str) span(CSS.syntaxStr, str)
+		else span(CSS.syntaxVal, full)
+	}
+	frag.normalize()
+	text(json.slice(lastIndex))
+	return frag
+}
+
+
+function SyntaxXML(xml) {
+	// Capture groups: [tagPunc, tagName, attrName, attrVal]
+	const regex = /(<\/?|\/?>|\?>)|(?<=<\??\/?)([A-Za-z_:][\w:.-]*)|([A-Za-z_:][\w:.-]*)(?==)|("(?:[^"\\]|\\.)*")/g
+
+	const MAX_NODES = 50_000
+	let nNodes = 0
+
+	const frag = new DocumentFragment()
+
+	function span(className, textContent) {
+		nNodes++
+		const s = document.createElement('span')
+		s.className = className
+		s.textContent = textContent
+		frag.appendChild(s)
+	}
+
+	function text(t) {
+		nNodes++
+		frag.appendChild(document.createTextNode(t))
+	}
+
+	let match
+	let lastIndex = 0
+	while ((match = regex.exec(xml)) !== null) {
+		if (nNodes > MAX_NODES)
+			break
+
+		if (match.index > lastIndex)
+			text(xml.slice(lastIndex, match.index))
+
+		lastIndex = match.index + match[0].length
+
+		if (match[1]) span(CSS.syntaxPunc, match[1])
+		else if (match[2]) span(CSS.syntaxTag, match[2])
+		else if (match[3]) span(CSS.syntaxAttr, match[3])
+		else if (match[4]) span(CSS.syntaxAttrVal, match[4])
+	}
+	text(xml.slice(lastIndex))
+	frag.normalize()
+	return frag
+}

package/src/server/utils/UrlParsers.js

@@ -8,6 +8,7 @@ export function parseQueryParams(url) {
 	return new URL(url, 'http://_').searchParams
 }
 
+
 export function parseSplats(url, filename) {
 	const { urlMask } = parseFilename(relative(config.mocksDir, filename))