mockaton 8.14.0 → 8.15.1

package/README.md

@@ -96,7 +96,7 @@ Mockaton({
 node my-mockaton.js
 ```
 
-### Node < 23.6 + TypeScript
+### TypeScript with Node < 23.6
 If you want to write mocks in TypeScript in a version older than Node 23.6:
 ```shell
 npm install tsx
@@ -362,6 +362,10 @@ Defaults to `0`, which means auto-assigned
 Defaults to `1200` milliseconds. Although routes can individually be delayed
 with the 🕓 Checkbox, the amount is globally configurable with this option.
 
+### `delayJitter?: number`
+Defaults to `0`. Range: `[0.0, 3.0]`. Maximum percentage of the delay to add.
+For example, `0.5` will add at most `600ms` to the default delay.   
+
 <br/>
 
 ### `proxyFallback?: string`

package/index.d.ts

@@ -22,6 +22,7 @@ interface Config {
 	formatCollectedJSON?: boolean
 
 	delay?: number
+	delayJitter?: number
 
 	cookies?: { [label: string]: string }
 

package/package.json

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

package/src/Api.js

@@ -9,9 +9,9 @@ import { parseJSON } from './utils/http-request.js'
 import { uiSyncVersion } from './Watcher.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 import { config, ConfigValidator } from './config.js'
-import { getStaticFilesCollection, findStaticBrokerByRoute } from './StaticDispatcher.js'
 import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 import { sendOK, sendJSON, sendUnprocessableContent, sendFile } from './utils/http-response.js'
+import { getStaticFilesCollection, findStaticBrokerByRoute, initStaticCollection } from './StaticDispatcher.js'
 
 
 const dashboardAssets = [
@@ -101,6 +101,7 @@ function longPollClientSyncVersion(req, response) {
 
 function reinitialize(_, response) {
 	mockBrokersCollection.init()
+	initStaticCollection() // TESTME
 	sendOK(response)
 }
 

package/src/Dashboard.css

@@ -7,7 +7,7 @@
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0170cc;
+		--colorAccent: #0068c1;
 		--colorAccentAlt: #068185;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
@@ -28,7 +28,7 @@
 		--color4xxBackground: #403630;
 		--colorAccent: #2495ff;
 		--colorBackground: #161616;
-		--colorHeaderBackground: #090909;
+		--colorHeaderBackground: #111;
 		--colorComboBoxBackground: #2a2a2a;
 		--colorSecondaryButtonBackground: #2a2a2a;
 		--colorSecondaryAction: #999;
@@ -115,7 +115,6 @@ select {
 	width: 100%;
 	align-items: flex-end;
 	padding: 16px;
-	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
 	gap: 10px;
@@ -258,9 +257,9 @@ table {
 
 .PayloadViewer {
 	position: sticky;
-	margin-top: 62px;
 	top: 62px;
 	width: 50%;
+	margin-top: 62px;
 	margin-left: 20px;
 
 	h2 {
@@ -296,7 +295,8 @@ table {
 	word-break: break-word;
 
 	span {
-		opacity: 0.5;
+		opacity: 0.6;
+		filter: saturate(0);
 	}
 
 	&:hover {
@@ -436,8 +436,8 @@ table {
 
 .InternalServerErrorToggler {
 	display: flex;
-	margin-left: 8px;
 	margin-right: 12px;
+	margin-left: 8px;
 	cursor: pointer;
 
 	> input {
@@ -472,32 +472,31 @@ table {
 	}
 }
 
-.ProgressBar {
-	position: relative;
-	width: 100%;
-	height: 2px;
-	background: var(--colorComboBoxHeaderBackground);
-
-	div {
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-		background: var(--colorAccent);
-		animation-name: _kfProgress;
-		/*animation-duration: It's in JavaScript */
-	}
+.SpinnerClock {
+	display: flex;
+	width: 36px;
+	height: 36px;
+	margin-top: 24px;
+	justify-self: center;
+	fill: var(--colorSecondaryAction);
 
-}
-@keyframes _kfProgress {
-	0% {
-		width: 0;
+	rect {
+		transform-origin: center
+	}
+	.HourHand {
+		animation: _kfRotate 9s linear infinite
 	}
+	.MinuteHand {
+		animation: _kfRotate 0.75s linear infinite
+	}
+}
+@keyframes _kfRotate {
 	100% {
-		width: 100%;
+		transform: rotate(360deg)
 	}
 }
 
+
 .StaticFilesList {
 	margin-top: 8px;
 
@@ -513,7 +512,8 @@ table {
 		}
 
 		span {
-			opacity: 0.5;
+			opacity: 0.6;
+			filter: saturate(0);
 		}
 	}
 }

package/src/Dashboard.js

@@ -42,17 +42,19 @@ const CSS = {
 	Field: 'Field',
 	Header: 'Header',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
+	GlobalDelayField: 'GlobalDelayField',
+	Main: 'Main',
 	MockList: 'MockList',
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
-	ProgressBar: 'ProgressBar',
 	ProxyToggler: 'ProxyToggler',
 	ResetButton: 'ResetButton',
-	GlobalDelayField: 'GlobalDelayField',
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
+	SpinnerClock: 'SpinnerClock',
+	SpinnerClockHourHand: 'HourHand',
+	SpinnerClockMinuteHand: 'MinuteHand',
 	StaticFilesList: 'StaticFilesList',
-	Main: 'Main',
 
 	red: 'red',
 	empty: 'empty',
@@ -65,7 +67,7 @@ const r = createElement
 const s = createSvgElement
 const mockaton = new Commander(window.location.origin)
 
-const PROGRESS_BAR_DELAY = 180
+const SPINNER_DELAY = 180
 let globalDelay = 1200
 
 
@@ -492,10 +494,13 @@ function PayloadViewer() {
 				r('code', { ref: payloadViewerRef }, Strings.click_link_to_preview))))
 }
 
-function PayloadViewerProgressBar() {
+function PayloadViewerSpinner() {
 	return (
-		r('div', { className: CSS.ProgressBar },
-			r('div', { style: { animationDuration: globalDelay - PROGRESS_BAR_DELAY + 'ms' } })))
+		s('svg', { viewBox: '0 0 24 24', class: CSS.SpinnerClock },
+			s('path', { d: 'M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z' }),
+			s('rect', { class: CSS.SpinnerClockHourHand, x: 11, y: 6, rx: 1, width: 2, height: 7 }),
+			s('rect', { class: CSS.SpinnerClockMinuteHand, x: 11, y: 11, rx: 1, width: 2, height: 9 })
+		))
 }
 
 function PayloadViewerTitle({ file, status, statusText }) {
@@ -517,13 +522,13 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 }
 
 async function previewMock(method, urlMask, href) {
-	const timer = setTimeout(renderProgressBar, PROGRESS_BAR_DELAY)
+	const timer = setTimeout(renderSpinner, SPINNER_DELAY)
 	const response = await fetch(href, { method })
 	clearTimeout(timer)
 	await updatePayloadViewer(method, urlMask, response)
 
-	function renderProgressBar() {
-		payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
+	function renderSpinner() {
+		payloadViewerRef.current.replaceChildren(PayloadViewerSpinner())
 	}
 }
 

package/src/MockDispatcher.js

@@ -2,8 +2,8 @@ import { join } from 'node:path'
 
 import { proxy } from './ProxyRelay.js'
 import { cookie } from './cookie.js'
-import { config } from './config.js'
 import { applyPlugins } from './MockDispatcherPlugins.js'
+import { config, calcDelay } from './config.js'
 import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { sendInternalServerError, sendNotFound, sendUnprocessableContent } from './utils/http-response.js'
@@ -14,7 +14,7 @@ export async function dispatchMock(req, response) {
 		const broker = mockBrokerCollection.findBrokerByRoute(req.method, req.url)
 		if (!broker || broker.proxied) {
 			if (config.proxyFallback)
-				await proxy(req, response, config.delay * Boolean(broker?.delayed))
+				await proxy(req, response, Number(broker?.delayed && calcDelay()))
 			else
 				sendNotFound(response)
 			return
@@ -34,7 +34,7 @@ export async function dispatchMock(req, response) {
 			: await applyPlugins(join(config.mocksDir, broker.file), req, response)
 
 		response.setHeader('Content-Type', mime)
-		setTimeout(() => response.end(body), config.delay * broker.delayed)
+		setTimeout(() => response.end(body), Number(broker.delayed && calcDelay()))
 	}
 	catch (error) {
 		if (error instanceof BodyReaderError)

package/src/Mockaton.js

@@ -8,7 +8,7 @@ import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
-import { dispatchStatic, isStatic, initStaticCollection } from './StaticDispatcher.js'
+import { dispatchStatic, initStaticCollection, findStaticBrokerByRoute } from './StaticDispatcher.js'
 import { sendNoContent, sendInternalServerError, sendUnprocessableContent } from './utils/http-response.js'
 
 
@@ -53,7 +53,7 @@ async function onRequest(req, response) {
 		else if (method === 'GET' && apiGetRequests.has(url))
 			apiGetRequests.get(url)(req, response)
 
-		else if (method === 'GET' && isStatic(req))
+		else if (method === 'GET' && findStaticBrokerByRoute(req.url))
 			await dispatchStatic(req, response)
 
 		else

package/src/StaticDispatcher.js

@@ -2,7 +2,7 @@ import { join } from 'node:path'
 import { readFileSync } from 'node:fs'
 
 import { mimeFor } from './utils/mime.js'
-import { config, isFileAllowed } from './config.js'
+import { config, isFileAllowed, calcDelay } from './config.js'
 import { sendPartialContent, sendNotFound } from './utils/http-response.js'
 import { isDirectory, isFile, listFilesRecursively } from './utils/fs.js'
 
@@ -55,29 +55,21 @@ export function getStaticFilesCollection() {
 	return collection
 }
 
-export function isStatic(req) {
-	return req.url in collection || join(req.url, 'index.html') in collection
-}
-
-// TODO improve
 export async function dispatchStatic(req, response) {
-	let broker = collection[join(req.url, 'index.html')]
-	if (!broker && req.url in collection)
-		broker = collection[req.url]
+	const broker = findStaticBrokerByRoute(req.url)
 
-	if (broker?.should404) { // TESTME
-		sendNotFound(response)
-		return
-	}
-
-	const file = broker.resolvedPath
 	setTimeout(async () => {
+		if (!broker || broker.should404) { // TESTME
+			sendNotFound(response)
+			return
+		}
+		const file = broker.resolvedPath
 		if (req.headers.range)
 			await sendPartialContent(response, req.headers.range, file)
 		else {
 			response.setHeader('Content-Type', mimeFor(file))
 			response.end(readFileSync(file))
 		}
-	}, broker.delayed * config.delay)
+	}, Number(broker.delayed && calcDelay()))
 }
 

package/src/config.js

@@ -26,6 +26,7 @@ const schema = {
 	formatCollectedJSON: [true, is(Boolean)],
 
 	delay: [1200, ms => Number.isInteger(ms) && ms >= 0],
+	delayJitter: [0, percent => percent >= 0 && percent <= 3],
 
 	cookies: [{}, is(Object)], // defaults to the first kv
 
@@ -66,6 +67,10 @@ export const ConfigValidator = Object.freeze(validators)
 
 export const isFileAllowed = f => !config.ignore.test(f)
 
+export const calcDelay = () => config.delayJitter
+	? config.delay * (1 + Math.random() * config.delayJitter)
+	: config.delay
+
 
 export function setup(options) {
 	Object.assign(config, options)

package/src/mockaton-logo.svg

@@ -2,7 +2,7 @@
 <svg version="1.1" viewBox="0 0 570 100" xmlns="http://www.w3.org/2000/svg">
 	<style>
 		:root { --color: #000000; }
-		@media (prefers-color-scheme: light) { :root { --color: #111 } }
+		@media (prefers-color-scheme: light) { :root { --color: #444 } }
 		@media (prefers-color-scheme: dark) { :root { --color: #eee } }
 		path { fill: var(--color) }
 	</style>