mockaton 10.4.2 → 10.5.1

package/package.json

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

package/src/Api.js

@@ -4,26 +4,29 @@
  */
 
 import { join } from 'node:path'
+import { randomBytes } from 'node:crypto'
+
 import { cookie } from './cookie.js'
+import DashboardHtml from './DashboardHtml.js'
 import { parseJSON } from './utils/http-request.js'
 import { uiSyncVersion } from './Watcher.js'
 import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 import { config, ConfigValidator } from './config.js'
 import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
-import { sendOK, sendJSON, sendUnprocessableContent, sendFile } from './utils/http-response.js'
+import { sendOK, sendJSON, sendUnprocessableContent, sendFile, sendHTML } from './utils/http-response.js'
 
 
 export const apiGetRequests = new Map([
-	[API.dashboard, serveDashboardAsset('Dashboard.html')],
+	[API.dashboard, serveHtml],
 	...[
-		'/ApiConstants.js',
-		'/ApiCommander.js',
 		'/Dashboard.css',
 		'/Dashboard.js',
+		'/ApiConstants.js',
+		'/ApiCommander.js',
 		'/Filename.js',
 		'/Logo.svg'
-	].map(f => [API.dashboard + f, serveDashboardAsset(f)]),
+	].map(f => [API.dashboard + f, serveStatic(f)]),
 
 	[API.state, getState],
 	[API.syncVersion, longPollClientSyncVersion],
@@ -49,12 +52,18 @@ export const apiPatchRequests = new Map([
 
 /** # GET */
 
-function serveDashboardAsset(f) {
-	return (_, response) => {
-		if (f.endsWith('.html'))
-			response.setHeader('Content-Security-Policy', `default-src 'self'; img-src data: blob: 'self'`)
-		sendFile(response, join(import.meta.dirname, f))
-	}
+function serveHtml(_, response) {
+	const nonce = randomBytes(12).toString('base64url')
+	response.setHeader('Content-Security-Policy', [
+		`default-src 'self'`,
+		`img-src data: blob: 'self'`,
+		`script-src 'nonce-${nonce}' 'self'`
+	].join(';'))
+	sendHTML(response, DashboardHtml(nonce))
+}
+
+function serveStatic(f) {
+	return (_, response) => sendFile(response, join(import.meta.dirname, f))
 }
 
 function getState(_, response) {

package/src/ApiCommander.js

@@ -17,7 +17,13 @@ export class Commander {
 
 	/** @returns {JsonPromise<State>} */
 	getState() {
-		return fetch(this.#addr + API.state)
+		const url = this.#addr + API.state
+		if (globalThis._aotFetch?.[url]) { // github.com/ericfortis/aot-fetch-demo
+			const promise = globalThis._aotFetch[url]
+			delete globalThis._aotFetch[url]
+			return promise
+		}
+		return fetch(url)
 	}
 
 	/** @returns {JsonPromise<number>} */

package/src/Dashboard.css

@@ -149,7 +149,6 @@ header {
 	background: var(--colorHeaderBackground);
 
 	> img {
-		width: 120px;
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 5px;

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,21 +60,23 @@ 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()
+deferred(initLongPoll)
 
 async function updateState() {
 	try {
@@ -132,6 +93,7 @@ async function updateState() {
 
 const r = createElement
 const s = createSvgElement
+const t = translation => translation[0]
 
 const leftSideRef = useRef()
 
@@ -159,9 +121,10 @@ function Header() {
 	return (
 		r('header', null,
 			r('img', {
-				alt: Strings.title,
+				alt: t`Mockaton`,
 				src: 'mockaton/Logo.svg',
-				width: 160
+				width: 120,
+				height: 22
 			}),
 			r('div', null,
 				GlobalDelayField(),
@@ -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',
@@ -706,19 +645,20 @@ Resizer.onUp = function () {
 
 const payloadViewerTitleRef = useRef()
 const payloadViewerRef = useRef()
+const SPINNER_DELAY = 80
 
 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() {
 	return (
 		r('div', className(CSS.ProgressBar),
-			r('div', { style: { animationDuration: state.delay + 'ms' } })))
+			r('div', { style: { animationDuration: state.delay - SPINNER_DELAY + 'ms' } })))
 }
 
 function PayloadViewerTitle({ file, statusText }) {
@@ -737,8 +677,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,9 +688,9 @@ 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)
+	}, SPINNER_DELAY)
 
 	try {
 		const response = await fetch(href, {
@@ -766,11 +706,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 +731,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 +775,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 +862,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 +903,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
@@ -985,7 +971,7 @@ function dittoSplitPaths(paths) {
 	return result
 }
 
-(function testDittoSplitPaths() {
+dittoSplitPaths.test = function () {
 	const input = [
 		'/api/user',
 		'/api/user/avatar',
@@ -1007,7 +993,7 @@ function dittoSplitPaths(paths) {
 		['/v2/foo/', 'bar']
 	]
 	console.assert(JSON.stringify(dittoSplitPaths(input)) === JSON.stringify(expected))
-}())
+}
 
 
 

package/src/{Dashboard.html → DashboardHtml.js}

@@ -1,14 +1,26 @@
+export default (nonce) => `
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
 	<meta charset="UTF-8">
-	<link rel="stylesheet" href="./mockaton/Dashboard.css">
+	
+	<script nonce="${nonce}">
+		// Fetches critical API data ahead-of-time.
+		// It’s before loading the stylesheet because CSS blocks.
+		// https://github.com/ericfortis/aot-fetch-demo
+		const initialState = location.origin + '/mockaton/state'
+		window._aotFetch = { [initialState]: fetch(initialState) }
+	</script>
+	
+	<link rel="stylesheet" href="./mockaton/Dashboard.css" />
+	
 	<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>
-<script src="./mockaton/Dashboard.js" type="module"></script>
+<script type="module" src="./mockaton/Dashboard.js"></script>
 </body>
 </html>
+`

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)

package/src/utils/http-response.js

@@ -9,6 +9,12 @@ export function sendOK(response) {
 	response.end()
 }
 
+export function sendHTML(response, html) {
+	logger.access(response)
+	response.setHeader('Content-Type', mimeFor('html'))
+	response.end(html)
+}
+
 export function sendJSON(response, payload) {
 	logger.access(response)
 	response.setHeader('Content-Type', 'application/json')