mockaton 10.4.2 → 10.5.0

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.4.2",
+	"version": "10.5.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Dashboard.js

@@ -3,40 +3,6 @@ import { parseFilename, extractComments } from './Filename.js'
 import { Commander } from './ApiCommander.js'
 
 
-const Strings = {
-	auto500: 'Auto500',
-	bulk_select: 'Bulk Select',
-	bulk_select_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
-	click_link_to_preview: 'Click a link to preview it',
-	cookie: 'Cookie',
-	cookie_disabled_title: 'No cookies specified in config.cookies',
-	delay: 'Delay',
-	delay_ms: 'Delay (ms)',
-	empty_response_body: '/* Empty Response Body */',
-	error_server_down: 'Looks like the Mockaton server is not running',
-	error_unexpected_error: 'Unexpected Error',
-	fallback_server: 'Fallback',
-	fallback_server_error: '⛔ Fallback Backend Error',
-	fallback_server_placeholder: 'Type backend address',
-	fetching: 'Fetching…',
-	got: 'Got',
-	group_by_method: 'Group by Method',
-	internal_server_error: 'Internal Server Error',
-	mock_selector: 'Mock Selector',
-	no_mocks_found: 'No mocks found',
-	none: 'None',
-	not_found: 'Not Found',
-	pick_comment: 'Pick Comment…',
-	preview: 'Preview',
-	proxied: 'Proxied',
-	proxy_toggler: 'Proxy Toggler',
-	reset: 'Reset',
-	save_proxied: 'Save Mocks',
-	settings: 'Settings',
-	static_get: 'Static GET',
-	title: 'Mockaton'
-}
-
 const CSS = {
 	BulkSelector: null,
 	CookieSelector: null,
@@ -72,26 +38,19 @@ const CSS = {
 	status4xx: null,
 
 	json: null,
-	syntaxKey: null,
-	syntaxStr: null,
-	syntaxVal: null,
-
 	syntaxAttr: null,
 	syntaxAttrVal: null,
+	syntaxKey: null,
+	syntaxPunc: null,
+	syntaxStr: null,
 	syntaxTag: null,
-	syntaxPunc: null
+	syntaxVal: null
 }
 for (const k of Object.keys(CSS))
 	CSS[k] = k
 
 
-/** @type {State & {
- *   canProxy: boolean
- *   groupByMethod: boolean
- *   toggleGroupByMethod: () => void
- *   leftSideWidth?: number
- *  }} */
-const state = {
+const state = /** @type {State} */ {
 	brokersByMethod: {},
 	staticBrokers: {},
 	cookies: [],
@@ -101,18 +60,20 @@ const state = {
 	collectProxied: false,
 	proxyFallback: '',
 	get canProxy() {
-		return Boolean(this.proxyFallback)
+		return Boolean(state.proxyFallback)
 	},
 
-	groupByMethod: localStorage.getItem('groupByMethod') !== 'false',
+	groupByMethod: initPreference('groupByMethod'),
 	toggleGroupByMethod() {
-		this.groupByMethod = !this.groupByMethod
-		localStorage.setItem('groupByMethod', String(this.groupByMethod))
+		state.groupByMethod = !state.groupByMethod
+		togglePreference('groupByMethod', state.groupByMethod)
+		updateState()
 	},
 
 	leftSideWidth: undefined
 }
 
+
 const mockaton = new Commander(location.origin)
 updateState()
 initLongPoll()
@@ -133,6 +94,8 @@ async function updateState() {
 const r = createElement
 const s = createSvgElement
 
+const t = translation => translation[0]
+
 const leftSideRef = useRef()
 
 function App() {
@@ -159,7 +122,7 @@ function Header() {
 	return (
 		r('header', null,
 			r('img', {
-				alt: Strings.title,
+				alt: t`Mockaton`,
 				src: 'mockaton/Logo.svg',
 				width: 160
 			}),
@@ -173,47 +136,38 @@ function Header() {
 }
 
 function SettingsMenu() {
-	const id = '_SettingsMenu_'
+	const { groupByMethod, toggleGroupByMethod } = state
+
+	const id = '_settings_menu_'
+	return (
+		r('button', {
+				title: t`Settings`,
+				popovertarget: id,
+				className: CSS.MenuTrigger
+			},
+			SettingsIcon(),
 
-	function MenuContent() {
-		return (
 			r('menu', {
 					id,
+					deferred: true,
 					popover: '',
-					className: CSS.SettingsMenu,
-					onToggle(event) {
-						if (event.newState === 'closed')
-							this.parentNode.removeChild(this)
-					}
+					className: CSS.SettingsMenu
 				},
+
 				r('label', className(CSS.GroupByMethod),
 					r('input', {
 						type: 'checkbox',
-						checked: state.groupByMethod,
-						onChange() {
-							state.toggleGroupByMethod()
-							updateState()
-						}
+						checked: groupByMethod,
+						autofocus: true,
+						onChange: toggleGroupByMethod
 					}),
-					r('span', null, Strings.group_by_method)),
+					r('span', null, t`Group by Method`)),
 
 				r('a', {
 					href: 'https://github.com/ericfortis/mockaton',
 					target: '_blank',
 					rel: 'noopener noreferrer'
-				}, 'Documentation')))
-	}
-
-	return (
-		r('button', {
-			title: Strings.settings,
-			onClick() {
-				if (!this.querySelector('menu'))
-					this.appendChild(MenuContent())
-			},
-			className: CSS.MenuTrigger,
-			popovertarget: id
-		}, SettingsIcon()))
+				}, t`Documentation`))))
 }
 
 function CookieSelector() {
@@ -224,14 +178,14 @@ function CookieSelector() {
 			.catch(onError)
 	}
 	const disabled = cookies.length <= 1
-	const list = cookies.length ? cookies : [[Strings.none, true]]
+	const list = cookies.length ? cookies : [[t`None`, true]]
 	return (
 		r('label', className(CSS.Field, CSS.CookieSelector),
-			r('span', null, Strings.cookie),
+			r('span', null, t`Cookie`),
 			r('select', {
 				autocomplete: 'off',
 				disabled,
-				title: disabled ? Strings.cookie_disabled_title : '',
+				title: disabled ? t`No cookies specified in config.cookies` : '',
 				onChange
 			}, list.map(([value, selected]) =>
 				r('option', { value, selected }, value)))))
@@ -241,7 +195,7 @@ function BulkSelector() {
 	const { comments } = state
 	// UX wise this should be a menu instead of this `select`.
 	// But this way is easier to implement, with a few hacks.
-	const firstOption = Strings.pick_comment
+	const firstOption = t`Pick Comment…`
 	function onChange() {
 		const value = this.value
 		this.value = firstOption // Hack 
@@ -254,12 +208,12 @@ function BulkSelector() {
 	const disabled = !comments.length
 	return (
 		r('label', className(CSS.Field),
-			r('span', null, Strings.bulk_select),
+			r('span', null, t`Bulk Select`),
 			r('select', {
 					className: CSS.BulkSelector,
 					autocomplete: 'off',
 					disabled,
-					title: disabled ? Strings.bulk_select_disabled_title : '',
+					title: disabled ? t`No mock files have comments which are anything within parentheses on the filename.` : '',
 					onChange
 				},
 				r('option', { value: firstOption }, firstOption),
@@ -267,7 +221,7 @@ function BulkSelector() {
 				comments.map(value =>
 					r('option', { value }, value)),
 				r('hr'),
-				r('option', { value: AUTOGENERATED_500_COMMENT }, Strings.auto500)
+				r('option', { value: AUTOGENERATED_500_COMMENT }, t`Auto500`)
 			)))
 }
 
@@ -287,7 +241,7 @@ function GlobalDelayField() {
 	}
 	return (
 		r('label', className(CSS.Field, CSS.GlobalDelayField),
-			r('span', null, Strings.delay_ms),
+			r('span', null, t`Delay (ms)`),
 			r('input', {
 				type: 'number',
 				min: 0,
@@ -317,11 +271,11 @@ function ProxyFallbackField() {
 	return (
 		r('div', className(CSS.Field, CSS.FallbackBackend),
 			r('label', null,
-				r('span', null, Strings.fallback_server),
+				r('span', null, t`Fallback`),
 				r('input', {
 					type: 'url',
 					autocomplete: 'none',
-					placeholder: Strings.fallback_server_placeholder,
+					placeholder: t`Type backend address`,
 					value: proxyFallback,
 					onChange
 				})),
@@ -343,7 +297,7 @@ function SaveProxiedCheckbox() {
 				checked: collectProxied,
 				onChange
 			}),
-			r('span', null, Strings.save_proxied)))
+			r('span', null, t`Save Mocks`)))
 }
 
 function ResetButton() {
@@ -358,7 +312,7 @@ function ResetButton() {
 		r('button', {
 			className: CSS.ResetButton,
 			onClick
-		}, Strings.reset))
+		}, t`Reset`))
 }
 
 
@@ -371,7 +325,7 @@ function MockList() {
 	if (!Object.keys(brokersByMethod).length)
 		return (
 			r('div', className(CSS.empty),
-				Strings.no_mocks_found))
+				t`No mocks found`))
 
 	if (groupByMethod)
 		return Object.keys(brokersByMethod).map((method) => Fragment(
@@ -439,6 +393,8 @@ function PreviewLink(method, urlMask, urlMaskDittoed) {
 			: tail))
 }
 
+const STR_PROXIED = t`Proxied`
+
 /** @param {ClientMockBroker} broker */
 function MockSelector(broker) {
 	function onChange() {
@@ -456,20 +412,20 @@ function MockSelector(broker) {
 		status === 500 ||
 		!item.includes(AUTOGENERATED_500_COMMENT))
 	if (!selected) {
-		selected = Strings.proxied
+		selected = STR_PROXIED
 		files.push(selected)
 	}
 
 	function nameFor(file) {
-		if (file === Strings.proxied)
-			return Strings.proxied
+		if (file === STR_PROXIED)
+			return STR_PROXIED
 		const { status, ext } = parseFilename(file)
 		const comments = extractComments(file)
 		const isAutogen500 = comments.includes(AUTOGENERATED_500_COMMENT)
 		return [
 			isAutogen500 ? '' : status,
 			ext === 'empty' || ext === 'unknown' ? '' : ext,
-			isAutogen500 ? Strings.auto500 : comments.join(' ')
+			isAutogen500 ? t`Auto500` : comments.join(' ')
 		].filter(Boolean).join(' ')
 	}
 
@@ -477,7 +433,7 @@ function MockSelector(broker) {
 		r('select', {
 			onChange,
 			autocomplete: 'off',
-			'aria-label': Strings.mock_selector,
+			'aria-label': t`Mock Selector`,
 			disabled: files.length <= 1,
 			...className(
 				CSS.MockSelector,
@@ -518,7 +474,7 @@ function InternalServerErrorToggler(broker) {
 	return (
 		r('label', {
 				className: CSS.InternalServerErrorToggler,
-				title: Strings.internal_server_error
+				title: t`Internal Server Error`
 			},
 			r('input', {
 				type: 'checkbox',
@@ -526,7 +482,7 @@ function InternalServerErrorToggler(broker) {
 				checked: parseFilename(broker.currentMock.file).status === 500,
 				onChange
 			}),
-			r('span', null, '500')))
+			r('span', null, t`500`)))
 }
 
 /** @param {ClientMockBroker} broker */
@@ -542,7 +498,7 @@ function ProxyToggler(broker) {
 	return (
 		r('label', {
 				className: CSS.ProxyToggler,
-				title: Strings.proxy_toggler
+				title: t`Proxy Toggler`
 			},
 			r('input', {
 				type: 'checkbox',
@@ -567,10 +523,10 @@ function StaticFilesList() {
 		Fragment(
 			r('tr', null,
 				r('th', { colspan: (2 + Number(!groupByMethod)) + Number(canProxy) }),
-				r('th', null, Strings.static_get)),
+				r('th', null, t`Static GET`)),
 			Object.values(staticBrokers).map((broker, i) =>
 				r('tr', null,
-					canProxy && r('td', null, ProxyStaticToggler()),
+					canProxy && r('td'),
 					r('td', null, DelayStaticRouteToggler(broker)),
 					r('td', null, NotFoundToggler(broker)),
 					!groupByMethod && r('td', className(CSS.Method), 'GET'),
@@ -605,31 +561,14 @@ function NotFoundToggler(broker) {
 	return (
 		r('label', {
 				className: CSS.NotFoundToggler,
-				title: Strings.not_found
+				title: t`Not Found`
 			},
 			r('input', {
 				type: 'checkbox',
 				checked: broker.status === 404,
 				onChange
 			}),
-			r('span', null, '404')))
-}
-
-function ProxyStaticToggler() { // TODO
-	function onChange() {
-	}
-	return (
-		r('label', {
-				style: { visibility: 'hidden' },
-				className: CSS.ProxyToggler,
-				title: Strings.proxy_toggler
-			},
-			r('input', {
-				type: 'checkbox',
-				disabled: true,
-				onChange
-			}),
-			CloudIcon()))
+			r('span', null, t`404`)))
 }
 
 
@@ -652,7 +591,7 @@ function ClickDragToggler({ checked, commit }) {
 	return (
 		r('label', {
 				className: CSS.DelayToggler,
-				title: Strings.delay
+				title: t`Delay`
 			},
 			r('input', {
 				type: 'checkbox',
@@ -710,9 +649,9 @@ const payloadViewerRef = useRef()
 function PayloadViewer() {
 	return (
 		r('div', className(CSS.PayloadViewer),
-			r('h2', { ref: payloadViewerTitleRef }, Strings.preview),
+			r('h2', { ref: payloadViewerTitleRef }, t`Preview`),
 			r('pre', null,
-				r('code', { ref: payloadViewerRef }, Strings.click_link_to_preview))))
+				r('code', { ref: payloadViewerRef }, t`Click a link to preview it`))))
 }
 
 function PayloadViewerProgressBar() {
@@ -737,8 +676,8 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 	return (
 		r('span', null,
 			gatewayIsBad
-				? r('span', className(CSS.red), Strings.fallback_server_error + ' ')
-				: r('span', null, Strings.got + ' '),
+				? r('span', className(CSS.red), t`⛔ Fallback Backend Error` + ' ')
+				: r('span', null, t`Got` + ' '),
 			r('abbr', { title: statusText }, status),
 			' ' + mime))
 }
@@ -748,7 +687,7 @@ async function previewMock(method, urlMask, href) {
 	previewMock.controller = new AbortController
 
 	const spinnerTimer = setTimeout(() => {
-		payloadViewerTitleRef.current.replaceChildren(Strings.fetching)
+		payloadViewerTitleRef.current.replaceChildren(t`Fetching…`)
 		payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
 	}, 80)
 
@@ -766,11 +705,12 @@ async function previewMock(method, urlMask, href) {
 	}
 }
 
+
 async function updatePayloadViewer(method, urlMask, response) {
 	const mime = response.headers.get('content-type') || ''
 
 	const file = mockSelectorFor(method, urlMask).value
-	if (file === Strings.proxied)
+	if (file === STR_PROXIED)
 		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitleWhenProxied({
 			status: response.status,
 			statusText: response.statusText,
@@ -790,7 +730,7 @@ async function updatePayloadViewer(method, urlMask, response) {
 			}))
 	}
 	else {
-		const body = await response.text() || Strings.empty_response_body
+		const body = await response.text() || t`/* Empty Response Body */`
 		if (mime === 'application/json')
 			payloadViewerRef.current.replaceChildren(r('span', className(CSS.json), syntaxJSON(body)))
 		else if (isXML(mime))
@@ -834,9 +774,9 @@ function onError(error) {
 	if (error?.name === 'AbortError')
 		return
 	if (error?.message === 'Failed to fetch')
-		showErrorToast(Strings.error_server_down)
+		showErrorToast(t`Looks like the Mockaton server is not running`)
 	else
-		showErrorToast(error || Strings.error_unexpected_error)
+		showErrorToast(error || t`Unexpected Error`)
 	console.error(error)
 }
 
@@ -921,6 +861,14 @@ function className(...args) {
 
 
 function createElement(tag, props, ...children) {
+	if (props?.deferred) {
+		delete props.deferred
+		const placeholder = document.createComment('')
+		deferred(() =>
+			placeholder.replaceWith(createElement(tag, props, ...children)))
+		return placeholder
+	}
+
 	const node = document.createElement(tag)
 	for (const [k, v] of Object.entries(props || {}))
 		if (k === 'ref') v.current = node
@@ -954,6 +902,43 @@ function Fragment(...args) {
 	return frag
 }
 
+function deferred(cb) {
+	return window.requestIdleCallback
+		? requestIdleCallback(cb)
+		: setTimeout(cb, 100) // Safari
+}
+
+
+// When false, the URL will be updated with param=false
+function initPreference(param) {
+	const qs = new URLSearchParams(location.search)
+	if (!qs.has(param)) {
+		const group = localStorage.getItem(param) !== 'false'
+		if (!group) {
+			const url = new URL(location.href)
+			url.searchParams.set(param, false)
+			history.replaceState(null, '', url)
+		}
+		return group
+	}
+	return qs.get(param) !== 'false'
+}
+
+// When false, the URL and localStorage will have param=false
+function togglePreference(param, nextVal) {
+	if (nextVal)
+		localStorage.removeItem(param)
+	else
+		localStorage.setItem(param, nextVal)
+
+	const url = new URL(location.href)
+	if (nextVal)
+		url.searchParams.delete(param)
+	else
+		url.searchParams.set(param, false)
+	history.replaceState(null, '', url)
+}
+
 
 /**
  * Think of this as a way of printing a directory tree in which

package/src/Mockaton.js

@@ -52,8 +52,9 @@ async function onRequest(req, response) {
 		sendBadRequest(response)               
 		return
 	}
-
+	
 	try {
+		const route = new URL(url, 'http://_').pathname
 		const { method } = req
 
 		if (config.corsAllowed)
@@ -61,11 +62,11 @@ async function onRequest(req, response) {
 
 		if (isPreflight(req))
 			sendNoContent(response)
-		else if (method === 'PATCH' && apiPatchRequests.has(url))
-			await apiPatchRequests.get(url)(req, response)
-		else if (method === 'GET' && apiGetRequests.has(url))
-			apiGetRequests.get(url)(req, response)
-		else if (method === 'GET' && staticCollection.brokerByRoute(url))
+		else if (method === 'PATCH' && apiPatchRequests.has(route))
+			await apiPatchRequests.get(route)(req, response)
+		else if (method === 'GET' && apiGetRequests.has(route))
+			apiGetRequests.get(route)(req, response)
+		else if (method === 'GET' && staticCollection.brokerByRoute(route))
 			await dispatchStatic(req, response)
 		else
 			await dispatchMock(req, response)