mockaton 12.7.0 → 12.7.2

package/package.json

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

package/src/client/ApiCommander.js

@@ -1,8 +1,4 @@
-import {
-	API,
-	HEADER_SYNC_VERSION,
-	LONG_POLL_SERVER_TIMEOUT
-} from './ApiConstants.js'
+import { API } from './ApiConstants.js'
 
 
 /** Client for controlling Mockaton via its HTTP API */
@@ -13,37 +9,30 @@ export class Commander {
 		this.addr = addr
 	}
 
+	/** @returns {Promise<Response>} */
 	#patch = (api, body) => fetch(this.addr + api, {
 		method: 'PATCH',
 		body: JSON.stringify(body)
 	})
 
-	/** @returns {Promise<Response>} */
 	reset = () => this.#patch(API.reset)
 
-	/** @returns {Promise<Response>} */
 	setGlobalDelay = delay => this.#patch(API.globalDelay, delay)
 
-	/** @returns {Promise<Response>} */
 	setGlobalDelayJitter = jitterPct => this.#patch(API.globalDelayJitter, jitterPct)
 
-	/** @returns {Promise<Response>} */
 	setCorsAllowed = value => this.#patch(API.cors, value)
 
-	/** @returns {Promise<Response>} */
 	setWatchMocks = enabled => this.#patch(API.watchMocks, enabled)
 
-	/** @returns {Promise<Response>} */
 	setProxyFallback = proxyAddr => this.#patch(API.fallback, proxyAddr)
 
-	/** @returns {Promise<Response>} */
 	setCollectProxied = shouldCollect => this.#patch(API.collectProxied, shouldCollect)
 
 	/** @returns {JsonPromise<State.cookies>} */
 	selectCookie = label => this.#patch(API.cookies, label)
 
 
-	/** @returns {Promise<Response>} */
 	bulkSelectByComment = comment => this.#patch(API.bulkSelect, comment)
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
@@ -60,10 +49,8 @@ export class Commander {
 	setRouteIsDelayed = (method, urlMask, delayed) => this.#patch(API.delay, [method, urlMask, delayed])
 
 
-	/** @returns {Promise<Response>} */
 	setStaticRouteStatus = (urlMask, status) => this.#patch(API.staticStatus, [urlMask, status])
 
-	/** @returns {Promise<Response>} */
 	setStaticRouteIsDelayed = (urlMask, delayed) => this.#patch(API.delayStatic, [urlMask, delayed])
 
 
@@ -71,20 +58,10 @@ export class Commander {
 	/** @returns {JsonPromise<State>} */
 	getState = () => fetch(this.addr + API.state)
 
+
 	/**
-	 * This is for listening to real-time updates. It responds when a new mock is added, deleted, or renamed.
-	 * @param {number?} currSyncVer - On mismatch, it responds immediately. Otherwise, long polls.
-	 * @param {AbortSignal} abortSignal
-	 * @returns {JsonPromise<number>}
+	 * SSE - Streams an incremental version when a mock is added, deleted, or renamed
+	 * @returns {Promise<Response>}
 	 */
-	getSyncVersion = (currSyncVer = undefined, abortSignal = undefined) =>
-		fetch(this.addr + API.syncVersion, {
-			signal: AbortSignal.any([
-				abortSignal,
-				AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)
-			].filter(Boolean)),
-			headers: currSyncVer !== undefined
-				? { [HEADER_SYNC_VERSION]: currSyncVer }
-				: {}
-		})
+	getSyncVersion = () => fetch(this.addr + API.syncVersion)
 }

package/src/client/ApiConstants.js

@@ -27,10 +27,8 @@ export const API = {
 }
 
 export const HEADER_502 = 'Mockaton502'
-export const HEADER_SYNC_VERSION = 'sync_version'
 
 export const DEFAULT_MOCK_COMMENT = '(default)'
-export const LONG_POLL_SERVER_TIMEOUT = 8_000
 
 export const EXT_UNKNOWN_MIME = 'unknown'
 export const EXT_EMPTY = 'empty'

package/src/client/Filename.js

@@ -61,9 +61,9 @@ function responseStatusIsValid(status) {
 		&& status <= 599
 }
 
-export function makeMockFilename(url, method, status, ext) {
+export function makeMockFilename(url, method, status, ext, comment = '') {
 	const urlMask = replaceIds(removeTrailingSlash(url))
-	return [urlMask, method, status, ext].join('.')
+	return [urlMask + comment, method, status, ext].join('.')
 }
 
 const reUuidV4 = /([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/gi

package/src/client/IndexHtml.js

@@ -5,10 +5,8 @@ export const CSP = [
 	`img-src data: blob: 'self'`
 ].join(';')
 
-
 // language=html
-export const IndexHtml = (hotReloadEnabled, version) =>
-	`
+export const IndexHtml = (hotReloadEnabled, version) => `
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
@@ -25,8 +23,8 @@ export const IndexHtml = (hotReloadEnabled, version) =>
 </head>
 <body>
 ${hotReloadEnabled
-		? '<script type="module" src="watcherDev.js"></script>'
-		: ''}
+	? '<script type="module" src="watcherDev.js"></script>'
+	: ''}
 </body>
 </html>
-`.trim()
+`

package/src/client/app-header.js

@@ -0,0 +1,161 @@
+import { createElement as r, t, defineClassNames } from './dom-utils.js'
+import { Logo, HelpIcon } from './app-icons.js'
+import { store } from './app-store.js'
+
+import CSS from './app.css' with { type: 'css' }
+defineClassNames(CSS)
+
+
+export function Header() {
+	return (
+		r('header', null,
+			r('a', {
+					className: CSS.Logo,
+					href: 'https://mockaton.com',
+					alt: t`Documentation`
+				},
+				Logo()),
+			r('div', null,
+				r('div', { className: CSS.GlobalDelayWrap },
+					GlobalDelayField(),
+					GlobalDelayJitterField()),
+				CookieSelector(),
+				store.showProxyField && ProxyFallbackField(),
+				ResetButton(),
+				HelpLink())))
+}
+
+
+function GlobalDelayField() {
+	function onChange() {
+		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)
+	}
+	return (
+		r('label', { className: CSS.GlobalDelay },
+			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 GlobalDelayJitterField() {
+	function onChange() {
+		this.value = this.valueAsNumber.toFixed(0)
+		this.value = Math.max(0, this.valueAsNumber)
+		this.value = Math.min(300, this.valueAsNumber)
+		store.setGlobalDelayJitter(this.valueAsNumber / 100)
+	}
+	function onWheel(event) {
+		if (event.deltaY > 0)
+			this.stepUp()
+		else
+			this.stepDown()
+		clearTimeout(onWheel.timer)
+		onWheel.timer = setTimeout(onChange.bind(this), 300)
+	}
+	return (
+		r('label', { className: CSS.GlobalDelayJitter },
+			r('span', null, t`Max Jitter %`),
+			r('input', {
+				type: 'number',
+				min: 0,
+				max: 300,
+				step: 10,
+				autocomplete: 'none',
+				value: (store.delayJitter * 100).toFixed(0),
+				onChange,
+				onWheel: [onWheel, { passive: true }]
+			})))
+}
+
+
+function CookieSelector() {
+	const { cookies } = store
+	const disabled = cookies.length <= 1
+	const list = cookies.length ? cookies : [[t`None`, true]]
+	return (
+		r('label', { className: CSS.CookieSelector },
+			r('span', null, t`Cookie`),
+			r('select', {
+				autocomplete: 'off',
+				disabled,
+				title: disabled
+					? t`No cookies specified in config.cookies`
+					: undefined,
+				onChange() { store.selectCookie(this.value) }
+			}, list.map(([value, selected]) =>
+				r('option', { value, selected }, value)))))
+}
+
+
+function ProxyFallbackField() {
+	const checkboxRef = {}
+	function onChange() {
+		checkboxRef.elem.disabled = !this.validity.valid || !this.value.trim()
+		if (!this.validity.valid)
+			this.reportValidity()
+		else
+			store.setProxyFallback(this.value.trim())
+	}
+	return (
+		r('div', { className: CSS.FallbackBackend },
+			r('label', null,
+				r('span', null, t`Fallback`),
+				r('input', {
+					type: 'url',
+					name: 'fallback',
+					placeholder: t`Type backend address`,
+					value: store.proxyFallback,
+					onChange
+				})),
+			SaveProxiedCheckbox(checkboxRef)))
+}
+
+
+function SaveProxiedCheckbox(ref) {
+	return (
+		r('label', { className: CSS.SaveProxiedCheckbox },
+			r('input', {
+				ref,
+				type: 'checkbox',
+				disabled: !store.canProxy,
+				checked: store.collectProxied,
+				onChange() { store.setCollectProxied(this.checked) }
+			}),
+			r('span', { className: CSS.checkboxBody }, t`Save Mocks`)))
+}
+
+
+function ResetButton() {
+	return (
+		r('button', {
+			className: CSS.ResetButton,
+			onClick: store.reset
+		}, t`Reset`))
+}
+
+
+function HelpLink() {
+	return (
+		r('a', {
+			target: '_blank',
+			href: 'https://mockaton.com',
+			title: t`Documentation`,
+			className: CSS.HelpLink
+		}, HelpIcon()))
+}

package/src/client/app-icons.js

@@ -0,0 +1,29 @@
+import { createSvgElement as s } from './dom-utils.js'
+
+
+export function Logo() {
+	return (
+		s('svg', { viewBox: '0 0 556 100' },
+			s('path', { d: 'm13.75 1.8789c-5.9487 0.19352-10.865 4.5652-11.082 11.686v81.445c-1e-7 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-64.982c0.02794-3.4488 3.0988-3.5551 4.2031-1.1562l16.615 59.059c1.4393 5.3711 5.1083 7.9633 8.7656 7.9473 3.6573 0.01603 7.3263-2.5762 8.7656-7.9473l16.615-59.059c1.1043-2.3989 4.1752-2.2925 4.2031 1.1562v64.982c0 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-81.445c-0.17732-7.0807-5.1334-11.492-11.082-11.686-5.9487-0.19352-12.652 3.8309-15.609 13.619l-15.686 57.334-15.686-57.334c-2.9569-9.7882-9.6607-13.813-15.609-13.619zm239.19 0.074219c-2.216 0-4 1.784-4 4v89.057c0 2.216 1.784 4 4 4h4.793c2.216 0 3.9868-1.784 4-4l0.10644-17.94c0.0734-0.07237 12.175-13.75 12.175-13.75 5.6772 11.091 11.404 22.158 17.113 33.232 1.0168 1.9689 3.4217 2.7356 5.3906 1.7188l4.2578-2.1992c1.9689-1.0168 2.7356-3.4217 1.7188-5.3906-6.4691-12.585-12.958-25.16-19.442-37.738l17.223-19.771c1.4555-1.671 1.2803-4.189-0.39062-5.6445l-3.6133-3.1465c-0.73105-0.63679-1.6224-0.96212-2.5176-0.98633-1.151-0.03113-2.3063 0.43508-3.125 1.375l-28.896 33.174v-51.99c0-2.216-1.784-4-4-4zm-58.255 23.316c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312l-0.125-7.8457c0-2.216-1.784-4-4-4h-4.6524c-2.216 0-4 1.784-4 4l3e-3 6.7888c3e-3 3.8063-1.5601 9.3694-8.4716 9.3694h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.6937 0 8.3697 5.2207 8.4687 11.828v2.2207c0 2.216 1.784 4 4 4h4.6524c2.216 0 4-1.784 4-4l0.125-5.7363c0-10.699-8.6117-19.312-19.311-19.312zm-72.182 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z' }),
+			s('path', { opacity: 0.7, d: 'm331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z' }),
+			s('path', { d: 'm392.75 1.373c-2.216 0-4 1.784-4 4v18.043h-5.3086c-2.216 0-4 1.784-4 4v4.793c0 2.216 1.784 4 4 4h5.3086v51.398c0 6.1465 3.7064 10.823 9.232 10.823h16.531c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-12.97v-49.428h9.8711c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-9.8711v-18.043c0-2.216-1.784-4-4-4zm122.96 23.896c-10.699 0-19.312 8.6137-19.312 19.312v49.812c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-45.648c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v45.684c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312zm-69.999 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z' })))
+}
+
+export function TimerIcon() {
+	return (
+		s('svg', { viewBox: '0 0 24 24' },
+			s('path', { d: 'm11 5.6 0.14 7.2 6 3.7' })))
+}
+
+export function CloudIcon() {
+	return (
+		s('svg', { viewBox: '0 0 24 24' },
+			s('path', { d: 'm6.1 8.9c0.98-2.3 3.3-3.9 6-3.9 3.3-2e-7 6 2.5 6.4 5.7 0.018 0.15 0.024 0.18 0.026 0.23 0.0016 0.037 8.2e-4 0.084 0.098 0.14 0.097 0.054 0.29 0.05 0.48 0.05 2.2 0 4 1.8 4 4s-1.8 4-4 4c-4-0.038-9-0.038-13-0.018-2.8 0-5-2.2-5-5-2.2e-7 -2.8 2.2-5 5-5 2.8 2e-7 5 2.2 5 5' }),
+			s('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' })))
+}
+
+export function HelpIcon() {
+	return (
+		s('svg', { viewBox: '0 0 24 24' },
+			s('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25' })))
+}

package/src/client/{payload-viewer.js → app-payload-viewer.js}

@@ -1,34 +1,28 @@
-import {
-	createElement as r,
-	t, classNames, defineClassNames
-} from './dom-utils.js'
-import { parseFilename } from './Filename.js'
+import { createElement as r, t, defineClassNames } from './dom-utils.js'
 import { HEADER_502 } from './ApiConstants.js'
+import { parseFilename } from './Filename.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
 defineClassNames(CSS)
 
 
-const payloadViewerTitleRef = {}
-const payloadViewerCodeRef = {}
+const titleRef = {}
+const codeRef = {}
 
 export function PayloadViewer() {
 	return (
-		r('div', classNames(CSS.PayloadViewer),
-			RightToolbar(),
+		r('div', { className: CSS.PayloadViewer },
+
+			r('div', { className: CSS.SubToolbar },
+				r('h2', { ref: titleRef },
+					!store.hasChosenLink && t`Preview`)),
+
 			r('pre', null,
-				r('code', { ref: payloadViewerCodeRef },
+				r('code', { ref: codeRef },
 					!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)
@@ -40,6 +34,7 @@ function PayloadViewerTitle(file, statusText) {
 			'.' + ext))
 }
 
+
 function PayloadViewerTitleWhenProxied(response) {
 	const mime = response.headers.get('content-type') || ''
 	const badGateway = response.headers.get(HEADER_502)
@@ -55,7 +50,7 @@ function PayloadViewerTitleWhenProxied(response) {
 const SPINNER_DELAY = 80
 function PayloadViewerProgressBar() {
 	return (
-		r('div', classNames(CSS.ProgressBar),
+		r('div', { className: CSS.ProgressBar },
 			r('div', {
 				style: {
 					animationDuration: store.delay - SPINNER_DELAY + 'ms'
@@ -63,6 +58,7 @@ function PayloadViewerProgressBar() {
 			})))
 }
 
+
 export async function previewMock() {
 	const { method, urlMask } = store.chosenLink
 
@@ -70,8 +66,8 @@ export async function previewMock() {
 	previewMock.controller = new AbortController
 
 	const spinnerTimer = setTimeout(() => {
-		payloadViewerTitleRef.elem.replaceChildren(t`Fetching…`)
-		payloadViewerCodeRef.elem.replaceChildren(PayloadViewerProgressBar())
+		titleRef.elem.replaceChildren(t`Fetching…`)
+		codeRef.elem.replaceChildren(PayloadViewerProgressBar())
 	}, SPINNER_DELAY)
 
 	try {
@@ -87,29 +83,30 @@ export async function previewMock() {
 	catch (error) {
 		clearTimeout(spinnerTimer)
 		store.onError(error)
-		payloadViewerCodeRef.elem.replaceChildren()
+		codeRef.elem.replaceChildren()
 	}
 }
 
+
 async function updatePayloadViewer(proxied, file, response) {
 	const mime = response.headers.get('content-type') || ''
 
-	payloadViewerTitleRef.elem.replaceChildren(proxied
+	titleRef.elem.replaceChildren(proxied
 		? PayloadViewerTitleWhenProxied(response)
 		: PayloadViewerTitle(file, response.statusText))
 
 	if (mime.startsWith('image/')) // Naively assumes GET 200
-		payloadViewerCodeRef.elem.replaceChildren(r('img', {
+		codeRef.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))
+			codeRef.elem.replaceChildren(SyntaxJSON(body))
 		else if (isXML(mime))
-			payloadViewerCodeRef.elem.replaceChildren(SyntaxXML(body))
+			codeRef.elem.replaceChildren(SyntaxXML(body))
 		else
-			payloadViewerCodeRef.elem.textContent = body
+			codeRef.elem.textContent = body
 	}
 }
 

package/src/client/app-store.js

@@ -42,8 +42,6 @@ export const store = {
 	},
 
 
-	getSyncVersion: api.getSyncVersion,
-
 	_request(action, onSuccess) {
 		Promise.try(async () => {
 			const response = await action()

package/src/client/app.css

@@ -11,6 +11,7 @@
 	--colorLabel: light-dark(#555, #aaa);
 	--colorDisabledMockSelector: light-dark(#444, #a9b9b9);
 	--colorText: light-dark(#000, #fff);
+
 	--colorAccent: light-dark(#0059dd, #2495ff);
 	--colorHover: light-dark(rgba(119, 193, 255, 0.4), rgba(0, 63, 115, 0.5));
 	--colorRed: light-dark(#da0f00, #f41606);
@@ -45,7 +46,7 @@ body {
 	font-family: inherit;
 	font-size: 100%;
 	scrollbar-width: thin;
-	corner-shape: squircle
+	corner-shape: squircle;
 }
 
 a:focus-visible,
@@ -99,6 +100,7 @@ select {
 	}
 }
 
+
 header {
 	display: flex;
 	flex: 0 0 100%;
@@ -192,7 +194,10 @@ header {
 	}
 }
 
-.Field {
+.GlobalDelay,
+.GlobalDelayJitter,
+.CookieSelector,
+.FallbackBackend {
 	width: 116px;
 
 	span {
@@ -226,7 +231,7 @@ header {
 		border-radius: var(--radius);
 	}
 
-	&.GlobalDelayField {
+	&.GlobalDelay {
 		position: relative;
 		width: 76px;
 
@@ -249,7 +254,7 @@ header {
 		}
 	}
 
-	&.GlobalDelayJitterField {
+	&.GlobalDelayJitter {
 		width: 80px;
 		span {
 			margin-left: 4px;
@@ -415,7 +420,7 @@ main {
 		text-align: left;
 
 		&:first-of-type {
-			border-top: 0
+			border-top: 0;
 		}
 
 		&.canProxy {
@@ -528,7 +533,7 @@ main {
 		&:focus-visible {
 			outline: 0;
 			& + .checkboxBody {
-				outline: 2px solid var(--colorAccent)
+				outline: 2px solid var(--colorAccent);
 			}
 		}