mockaton 13.3.2 → 13.3.4

package/package.json

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

package/src/client/app-payload-viewer.js

@@ -93,8 +93,6 @@ export async function previewMock() {
 
 
 async function updatePayloadViewer(proxied, file, response) {
-	const mime = response.headers.get('content-type') || ''
-
 	titleRef.elem.replaceChildren(proxied
 		? PayloadViewerTitleWhenProxied(response)
 		: PayloadViewerTitle(file, response.statusText))
@@ -104,6 +102,12 @@ async function updatePayloadViewer(proxied, file, response) {
 		return
 	}
 
+	async function bodyAsText() {
+		return (await response.text()) || t`/* Empty Response Body */`
+	}
+
+	const mime = response.headers.get('content-type') || ''
+
 	if (mime.startsWith('image/'))
 		codeRef.elem.replaceChildren(r('img', {
 			src: URL.createObjectURL(await response.blob())
@@ -140,11 +144,6 @@ async function updatePayloadViewer(proxied, file, response) {
 			href: URL.createObjectURL(await response.blob()),
 			download: store.chosenLink.urlMask
 		}, t`Download`))
-
-
-	async function bodyAsText() {
-		return (await response.text()) || t`/* Empty Response Body */`
-	}
 }
 
 

package/src/client/app-store.js

@@ -140,21 +140,7 @@ export const store = {
 		store.brokersByMethod[method][urlMask] = broker
 	},
 
-	folderGroupsByMethod(method) {
-		const groups = []
-		let g = null
-		for (const row of store._brokersAsRowsByMethod(method)) {
-			const folder = row.urlMask.substring(0, row.urlMask.lastIndexOf('/') + 1)
-			if (!g || g.folder !== folder) {
-				g = { folder, children: [] }
-				groups.push(g)
-			}
-			g.children.push(row)
-		}
-		return groups
-	},
-
-	_brokersAsRowsByMethod(method) {
+	brokersAsRowsByMethod(method) {
 		const rows = store._brokersAsArray(method)
 			.map(b => new BrokerRowModel(b, store.canProxy))
 			.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
@@ -223,18 +209,18 @@ export const store = {
 function initPreference(param) {
 	const qs = new URLSearchParams(globalThis.location?.search)
 	if (!qs.has(param)) {
-		const group = globalThis.localStorage?.getItem(param) !== 'false'
+		const group = globalThis.localStorage?.getItem(param) !== '0'
 		if (!group) {
 			const url = new URL(globalThis.location?.href)
-			url.searchParams.set(param, false)
+			url.searchParams.set(param, '0')
 			history.replaceState(null, '', url)
 		}
 		return group
 	}
-	return qs.get(param) !== 'false'
+	return qs.get(param) !== '0'
 }
 
-// When false, the URL and localStorage will have param=false
+// When false, the URL and localStorage will have param='0'
 function togglePreference(param, nextVal) {
 	if (nextVal)
 		globalThis.localStorage?.removeItem(param)
@@ -245,7 +231,7 @@ function togglePreference(param, nextVal) {
 	if (nextVal)
 		url.searchParams.delete(param)
 	else
-		url.searchParams.set(param, false)
+		url.searchParams.set(param, '0')
 	history.replaceState(null, '', url)
 }
 
@@ -285,6 +271,7 @@ export class BrokerRowModel {
 	method = ''
 	urlMask = ''
 	urlMaskDittoed = ['', '']
+	children = []
 	#broker = /** @type ClientMockBroker */ {}
 	#canProxy = false
 

package/src/client/app.css

@@ -6,17 +6,17 @@
 	--colorBgHeader: light-dark(#f2f2f3, #141414);
 	--colorBgHeaderField: light-dark(#fff, #222);
 
-	--colorBorder: light-dark(#e0e0e0, #323232);
+	--colorBorder: light-dark(#e0e0e0, #2c2c2c);
 	--colorBorderActive: light-dark(#c8c8c8, #3c3c3c);
 
 	--colorLabel: light-dark(#555, #aaa);
 	--colorText: light-dark(#000, #fff);
 
-	--colorAccent: light-dark(#0059dd, #2495ff);
-	--colorHover: light-dark(#c1e2ff, #062d59);
+	--colorAccent: light-dark(#0081ff, #2495ff);
+	--colorHover: light-dark(#dbedff, #062d59);
 
 	--colorRed: light-dark(#da0f00, #f41606);
-	--colorPink: light-dark(#ed206a, #f92672);
+	--colorPink: light-dark(#ed206a, #ff2e7a);
 	--colorPurple: light-dark(#9b71e8, #ae81ff);
 	--colorGreen: light-dark(#388e3c, #a6e22e);
 	--colorBg4xx: light-dark(#ffedd1, #68554a);
@@ -44,6 +44,8 @@ body {
 	padding: 0;
 	border: 0;
 	margin: 0;
+	letter-spacing: -0.374px;
+	line-height: 1.2;
 	font-family: inherit;
 	font-size: 100%;
 	scrollbar-width: thin;
@@ -119,13 +121,8 @@ header {
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 3px;
-		opacity: 94%;
 		transition: opacity 240ms ease-in-out;
 
-		&:hover {
-			opacity: 1;
-		}
-
 		svg {
 			width: 120px;
 			pointer-events: none;
@@ -192,12 +189,14 @@ header {
 		height: 24px;
 		flex-shrink: 0;
 		align-self: end;
+		margin-bottom: 2px;
 		margin-left: auto;
 		border-radius: 50%;
-		fill: var(--colorLabel);
+		fill: white;
+		background: var(--colorAccent);
 
-		&:hover {
-			fill: var(--colorAccent);
+		svg {
+			transform: scale(.7);
 		}
 	}
 }
@@ -420,6 +419,7 @@ main {
 .Table {
 	height: 100%;
 	padding: 16px;
+	padding-bottom: 64px;
 	padding-left: 12px;
 	user-select: none;
 	overflow-y: auto;
@@ -462,6 +462,7 @@ main {
 			overflow: hidden;
 			align-items: center;
 			padding: 5px 0;
+			font-weight: 500;
 			font-size: 12px;
 			list-style: none;
 			cursor: pointer;
@@ -516,7 +517,7 @@ main {
 		}
 
 		&[open] {
-			&:has(summary:hover) {
+			&:has(summary:hover):not(:has(details:hover)) {
 				background: linear-gradient(90deg, var(--colorHover), var(--colorBg));
 			}
 
@@ -567,6 +568,7 @@ main {
 	padding: 6px 8px;
 	margin-right: -2px;
 	margin-left: 4px;
+	font-weight: 500;
 	border-radius: var(--radius);
 	word-break: break-word;
 
@@ -578,7 +580,7 @@ main {
 		background: var(--colorAccent);
 	}
 	.dittoDir {
-		opacity: 0.9;
+		opacity: 0.8;
 		filter: saturate(0.1);
 	}
 }

package/src/client/app.js

@@ -3,6 +3,7 @@ import { createElement as r, t, classNames, restoreFocus, Fragment, defineClassN
 import { store } from './app-store.js'
 import { API } from './ApiConstants.js'
 import { Header } from './app-header.js'
+import { dirStructure } from './dirStructure.js'
 import { PayloadViewer, previewMock } from './app-payload-viewer.js'
 import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
 
@@ -21,36 +22,36 @@ initKeyboardNavigation()
 let mounted = false
 function render() {
 	restoreFocus(() => document.body.replaceChildren(App()))
-	if (store.hasChosenLink)
-		previewMock()
+	if (store.hasChosenLink) previewMock()
+	if (!mounted) LeftSide.$('a')?.focus()
 	mounted = true
 }
 
-
-const leftSideRef = {}
-
 function App() {
-	return Fragment(Header(), Main())
-}
-
-
-function Main() {
-	return (
+	return Fragment(
+		Header(),
 		r('main', null,
-			r('div', {
-					ref: leftSideRef,
-					style: { width: leftSideRef.width },
-					className: CSS.leftSide
-				},
-				r('div', { className: CSS.SubToolbar },
-					GroupByMethod(),
-					BulkSelector()),
-				r('div', { className: CSS.Table }, MockList())),
+			LeftSide(),
 			r('div', { className: CSS.rightSide },
-				Resizer(leftSideRef),
+				Resizer(LeftSide.ref),
 				PayloadViewer())))
 }
 
+function LeftSide() {
+	return r('div', {
+			ref: LeftSide.ref,
+			style: { width: LeftSide.ref.width },
+			className: CSS.leftSide
+		},
+		r('div', { className: CSS.SubToolbar },
+			GroupByMethod(),
+			BulkSelector()),
+		r('div', { className: CSS.Table }, MockList()))
+}
+LeftSide.ref = { width: undefined }
+LeftSide.$ = selector => LeftSide.ref.elem.querySelector(selector)
+LeftSide.$$ = selector => LeftSide.ref.elem.querySelectorAll(selector)
+
 
 function GroupByMethod() {
 	return (
@@ -90,7 +91,6 @@ function BulkSelector() {
 }
 
 
-
 function MockList() {
 	if (!Object.keys(store.brokersByMethod).length)
 		return r('div', null, t`No mocks found`)
@@ -100,15 +100,27 @@ function MockList() {
 			r('div', {
 				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
 			}, method),
-			FolderGroups(store.folderGroupsByMethod(method))))
+			FolderGroups(store.brokersAsRowsByMethod(method))))
+
+	return FolderGroups(store.brokersAsRowsByMethod('*'))
+}
 
-	return FolderGroups(store.folderGroupsByMethod('*'))
+function FolderGroups(bRows) {
+	const res = []
+	for (const b of dirStructure(bRows)) {
+		if (!b.children.length)
+			res.push(Row(b))
+		else
+			res.push(FolderGroup(b))
+	}
+	return res
 }
 
-function FolderGroups(groups) {
-	return groups.map(({ folder, children }) => children.length === 1
-		? Row(children[0], 0)
-		: r('details', {
+function FolderGroup(broker) {
+	const folder = broker.urlMask
+	const children = broker.children
+	return (
+		r('details', {
 				className: CSS.FolderGroup,
 				open: !store.collapsedFolders.has(folder),
 				onToggle() {
@@ -124,55 +136,77 @@ function FolderGroups(groups) {
 							store.canProxy && CSS.canProxy)
 					},
 					folder + '…')),
-			children.map(Row)))
+			Row(broker),
+			children.map(c => c.children.length
+				? FolderGroup(c)
+				: Row(c))))
 }
 
-/**
- * @param {BrokerRowModel} row
- * @param {number} i
- */
-function Row(row, i) {
+/** @param {BrokerRowModel} row */
+function Row(row) {
 	const { method, urlMask } = row
 	return (
 		r('div', {
 				key: row.key,
 				className: classNames(CSS.TableRow, mounted && row.isNew && CSS.animIn)
 			},
-			store.canProxy && ProxyToggler(method, urlMask, row.proxied),
 
-			DelayToggler({
-				checked: row.delayed,
+			store.canProxy && ClickDragToggler({
+				className: CSS.ProxyToggler,
+				title: t`Proxy Toggler`,
+				body: CloudIcon(),
+				checked: row.proxied,
 				commit(checked) {
-					store.setDelayed(method, urlMask, checked)
-				},
+					store.setProxied(method, urlMask, checked)
+				}
 			}),
 
-			StatusCodeToggler({
-				title: row.isStatic ? t`Not Found` : t`Internal Server Error`,
-				body: row.isStatic ? t`404` : t`500`,
-				disabled: row.opts.length === 1 && (row.isStatic ? row.status === 404 : row.status === 500),
-				checked: !row.proxied && (row.isStatic ? row.status === 404 : row.status === 500),
-				commit() {
-					store.toggleStatus(method, urlMask, row.isStatic ? 404 : 500)
+			ClickDragToggler({
+				className: CSS.DelayToggler,
+				title: t`Delay`,
+				body: TimerIcon(),
+				checked: row.delayed,
+				commit(checked) {
+					store.setDelayed(method, urlMask, checked)
 				}
 			}),
 
+			ClickDragToggler(
+				row.isStatic
+					? {
+						className: CSS.StatusCodeToggler,
+						title: t`Not Found`,
+						body: t`404`,
+						disabled: row.opts.length === 1 && row.status === 404,
+						checked: !row.proxied && row.status === 404,
+						commit() { store.toggleStatus(method, urlMask, 404) }
+					}
+					: {
+						className: CSS.StatusCodeToggler,
+						title: t`Internal Server Error`,
+						body: t`500`,
+						disabled: row.opts.length === 1 && row.status === 500,
+						checked: !row.proxied && row.status === 500,
+						commit() { store.toggleStatus(method, urlMask, 500) }
+					}),
+
 			!store.groupByMethod && r('span', { className: CSS.Method }, method),
 
-			PreviewLink(method, urlMask, row.urlMaskDittoed, i === 0),
+			PreviewLink(method, urlMask, row.urlMaskDittoed),
 
 			MockSelector(row)))
 }
 
+
 function renderRow(method, urlMask) {
 	unChooseOld()
 	const row = store.brokerAsRow(method, urlMask)
-	const tr = leftSideRef.elem.querySelector(`.${CSS.TableRow}[key="${row.key}"]`)
+	const tr = LeftSide.$(`.${CSS.TableRow}[key="${row.key}"]`)
 	mergeTableRow(tr, Row(row))
 	previewMock()
 
 	function unChooseOld() {
-		return leftSideRef.elem.querySelector(`a.${CSS.chosen}`)
+		return LeftSide.$(`a.${CSS.chosen}`)
 			?.classList.remove(CSS.chosen)
 	}
 
@@ -203,8 +237,7 @@ function renderRow(method, urlMask) {
 }
 
 
-
-function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
+function PreviewLink(method, urlMask, urlMaskDittoed) {
 	function onClick(event) {
 		event.preventDefault()
 		store.previewLink(method, urlMask)
@@ -215,7 +248,6 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 		r('a', {
 			className: classNames(CSS.PreviewLink, isChosen && CSS.chosen),
 			href: urlMask,
-			autofocus,
 			onClick
 		}, ditto
 			? [r('span', { className: CSS.dittoDir }, ditto), tail]
@@ -247,42 +279,6 @@ function MockSelector(row) {
 }
 
 
-function ProxyToggler(method, urlMask, checked) {
-	return ClickDragToggler({
-		className: CSS.ProxyToggler,
-		title: t`Proxy Toggler`,
-		body: CloudIcon(),
-		checked,
-		commit(checked) {
-			store.setProxied(method, urlMask, checked)
-		}
-	})
-}
-
-
-
-function StatusCodeToggler({ title, body, commit, checked, disabled }) {
-	return ClickDragToggler({
-		title,
-		disabled,
-		className: CSS.StatusCodeToggler,
-		commit,
-		checked,
-		body
-	})
-}
-
-function DelayToggler({ checked, commit, className }) {
-	return ClickDragToggler({
-		checked,
-		commit,
-		className: classNames(CSS.DelayToggler, className),
-		canClickDrag: true,
-		title: t`Delay`,
-		body: TimerIcon()
-	})
-}
-
 function ClickDragToggler({ checked, commit, className, title, body }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
@@ -305,7 +301,7 @@ function ClickDragToggler({ checked, commit, className, title, body }) {
 			return
 
 		// Uncheck all other in the column. 
-		for (const elem of leftSideRef.elem.querySelectorAll(selector))
+		for (const elem of LeftSide.$$(selector))
 			if (elem !== this && elem.checked && !elem.disabled) {
 				elem.checked = false
 				elem.dispatchEvent(new Event('change'))
@@ -488,7 +484,6 @@ function columnSelectors() {
 	]
 }
 
-
 function initKeyboardNavigation() {
 	const rowSelectors = [
 		...columnSelectors(),
@@ -503,7 +498,7 @@ function initKeyboardNavigation() {
 				const sel = selectorForColumnOf(pivot)
 				if (sel) {
 					const offset = key === 'ArrowDown' ? +1 : -1
-					const siblings = leftSideRef.elem.querySelectorAll(sel)
+					const siblings = LeftSide.$$(sel)
 					circularAdjacent(offset, siblings, pivot).focus()
 				}
 				break

package/src/client/dirStructure.js

@@ -0,0 +1,47 @@
+function TrieNode() {
+	this.brokers = []
+	this.tnChildren = new Map()
+}
+
+/**
+ * @param {Partial<BrokerRowModel>[]} brokers
+ * @returns {Partial<BrokerRowModel>[]}
+ */
+export function dirStructure(brokers) {
+	return dfs(trie(brokers))
+}
+
+function trie(brokers) {
+	const root = new TrieNode()
+	for (const b of brokers) {
+		let node = root
+		for (const seg of b.urlMask.split('/')) { // TODO it should ignore query string
+			const segNode = node.tnChildren.get(seg) || new TrieNode()
+			node.tnChildren.set(seg, segNode)
+			node = segNode
+		}
+		node.brokers.push(b)
+	}
+	return root
+}
+
+/** @param {TrieNode} node */
+function dfs(node) {
+	const childBrokers = []
+	for (const tnc of node.tnChildren.values())
+		childBrokers.push(...dfs(tnc))
+
+	const brokers = node.brokers.length
+		? [node.brokers[0], ...childBrokers, ...node.brokers.slice(1)]
+		: childBrokers
+
+	if (!brokers.length)
+		return []
+
+	const [head, ...rest] = brokers
+	if (node.brokers.length || !head.children.length) {
+		head.children.push(...rest)
+		return [head]
+	}
+	return brokers
+}

package/src/client/dirStructure.test.js

@@ -0,0 +1,81 @@
+import { test } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { dirStructure } from './dirStructure.js'
+
+
+const input = [
+	{ children: [], method: 'GET', urlMask: '/api/user' },
+	{ children: [], method: 'GET', urlMask: '/api/user/avatar' },
+	{ children: [], method: 'GET', urlMask: '/api/video/[id]' },
+	{ children: [], method: 'GET', urlMask: '/index.html' },
+	{ children: [], method: 'GET', urlMask: '/media/file-a.txt' },
+	{ children: [], method: 'GET', urlMask: '/media/file-b.txt' },
+	{ children: [], method: 'GET', urlMask: '/media/sub/file-aa.txt' },
+	{ children: [], method: 'GET', urlMask: '/media/sub/file-bb.txt' },
+	{ children: [], method: 'POST', urlMask: '/api/user' },
+	{ children: [], method: 'POST', urlMask: '/api/user/avatar/foo' },
+	{ children: [], method: 'PATCH', urlMask: '/api/user' }
+]
+
+
+const expected = [
+	{
+		urlMask: '/api/user',
+		method: 'GET',
+		children: [
+			{
+				urlMask: '/api/user/avatar',
+				method: 'GET',
+				children: [
+					{
+						urlMask: '/api/user/avatar/foo',
+						method: 'POST',
+						children: []
+					}
+				]
+			}, {
+				urlMask: '/api/user',
+				method: 'POST',
+				children: []
+			}, {
+				urlMask: '/api/user',
+				method: 'PATCH',
+				children: []
+			}
+		]
+	},
+	{
+		urlMask: '/api/video/[id]',
+		method: 'GET',
+		children: []
+	},
+	{
+		urlMask: '/index.html',
+		method: 'GET',
+		children: []
+	},
+	{
+		urlMask: '/media/file-a.txt',
+		method: 'GET',
+		children: [
+			{
+				urlMask: '/media/file-b.txt',
+				method: 'GET',
+				children: []
+			}, {
+				urlMask: '/media/sub/file-aa.txt',
+				method: 'GET',
+				children: [
+					{
+						urlMask: '/media/sub/file-bb.txt',
+						method: 'GET',
+						children: []
+					}
+				]
+			}
+		]
+	}
+]
+
+test('acceptance', () => deepEqual(dirStructure(input), expected))
+

package/src/client/graphics.js

@@ -1,35 +1,25 @@
 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.6, 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 const Logo = () =>
+	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: 1, fill: 'currentColor', 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 const TimerIcon = () =>
+	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 const CloudIcon = () =>
+	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' })))
-}
+export const HelpIcon = () =>
+	s('svg', { viewBox: '0 0 24 24' },
+		s('path', { d: 'M11.07 12.85c.77-1.39 2.25-2.21 3.11-3.44.91-1.29.4-3.7-2.18-3.7-1.69 0-2.52 1.28-2.87 2.34L6.54 6.96C7.25 4.83 9.18 3 11.99 3c2.35 0 3.96 1.07 4.78 2.41.7 1.15 1.11 3.3.03 4.9-1.2 1.77-2.35 2.31-2.97 3.45-.25.46-.35.76-.35 2.24h-2.89c-.01-.78-.13-2.05.48-3.15M14 20c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2' }))
 
-export function ChevronDownIcon() {
-	return (
-		s('svg', { viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', 'stroke-width': '2' },
-			s('path', { d: 'M6 9l6 6 6-6' })))
-}
+export const ChevronDownIcon = () =>
+	s('svg', { viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', 'stroke-width': '2' },
+		s('path', { d: 'M6 9l6 6 6-6' }))

package/src/server/Mockaton.js

@@ -5,8 +5,8 @@ import pkgJSON from '../../package.json' with { type: 'json' }
 
 import { logger } from './utils/logger.js'
 import { ServerResponse } from './utils/HttpServerResponse.js'
-import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
+import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
 
 import { API } from '../client/ApiConstants.js'
 

package/src/server/Watcher.js

@@ -4,7 +4,6 @@ import { EventEmitter } from 'node:events'
 
 import { config } from './config.js'
 import { isFile, isDirectory } from './utils/fs.js'
-
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 
 

package/src/server/mockBrokersCollection.js

@@ -35,7 +35,7 @@ export function init() {
 
 /** @returns {boolean} registered */
 export function registerMock(file, isFromWatcher = false) {
-	if (brokerByFilename(file)?.hasMock(file) || 
+	if (brokerByFilename(file)?.hasMock(file) ||
 		!isFileAllowed(basename(file)))
 		return false