mockaton 8.15.0 → 8.16.0

package/README.md

@@ -6,7 +6,7 @@
 [![CodeQL](https://github.com/ericfortis/mockaton/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/ericfortis/mockaton/actions/workflows/github-code-scanning/codeql)
 
 An HTTP mock server for simulating APIs with minimal setup
-— ideal for triggering difficult to reproduce backend states.
+— ideal for testing difficult to reproduce backend states.
 
 
 ## Overview
@@ -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

package/package.json

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

package/src/Dashboard.css

@@ -257,9 +257,9 @@ table {
 
 .PayloadViewer {
 	position: sticky;
-	margin-top: 62px;
 	top: 62px;
 	width: 50%;
+	margin-top: 62px;
 	margin-left: 20px;
 
 	h2 {
@@ -434,10 +434,11 @@ table {
 	}
 }
 
-.InternalServerErrorToggler {
+.InternalServerErrorToggler,
+.NotFoundToggler {
 	display: flex;
-	margin-left: 8px;
 	margin-right: 12px;
+	margin-left: 8px;
 	cursor: pointer;
 
 	> input {
@@ -472,32 +473,33 @@ 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: 92px;
+	justify-self: center;
+	fill: none;
+	stroke: var(--colorSecondaryAction);
+	stroke-width: 2px;
+
+	.HourHand,
+	.MinuteHand {
+		stroke-linecap: round;
+		transform-origin: center;
+		animation: _kfRotate 9s linear infinite
+	}
+	.MinuteHand {
+		animation-duration: .75s;
 	}
-
 }
-@keyframes _kfProgress {
-	0% {
-		width: 0;
-	}
+@keyframes _kfRotate {
 	100% {
-		width: 100%;
+		transform: rotate(360deg)
 	}
 }
 
+
 .StaticFilesList {
 	margin-top: 8px;
 

package/src/Dashboard.js

@@ -40,19 +40,22 @@ const CSS = {
 	DelayToggler: 'DelayToggler',
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
+	GlobalDelayField: 'GlobalDelayField',
 	Header: 'Header',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
+	Main: 'Main',
 	MockList: 'MockList',
 	MockSelector: 'MockSelector',
+	NotFoundToggler: 'NotFoundToggler',
 	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 +68,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
 
 
@@ -449,7 +452,7 @@ function NotFoundToggler({ broker }) {
 	}
 	return (
 		r('label', {
-				className: CSS.InternalServerErrorToggler, // TODO rename
+				className: CSS.NotFoundToggler,
 				title: Strings.not_found
 			},
 			r('input', {
@@ -492,10 +495,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('circle', { cx: 12, cy: 12, r: 10 }),
+			s('line', { class: CSS.SpinnerClockHourHand, x1: 12, y1: 12, x2: 12, y2: 8 }),
+			s('line', { class: CSS.SpinnerClockMinuteHand, x1: 12, y1: 12, x2: 12, y2: 5 })
+		))
 }
 
 function PayloadViewerTitle({ file, status, statusText }) {
@@ -517,13 +523,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/Mockaton.js

@@ -3,11 +3,11 @@ import { createServer } from 'node:http'
 import { API } from './ApiConstants.js'
 import { config, setup } from './config.js'
 import { dispatchMock } from './MockDispatcher.js'
-import { watchMocksDir } from './Watcher.js'
 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 { watchMocksDir, watchStaticMocksDir } from './Watcher.js'
 import { dispatchStatic, initStaticCollection, findStaticBrokerByRoute } from './StaticDispatcher.js'
 import { sendNoContent, sendInternalServerError, sendUnprocessableContent } from './utils/http-response.js'
 
@@ -17,8 +17,9 @@ process.on('unhandledRejection', error => { throw error })
 export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
-	watchMocksDir()
 	initStaticCollection()
+	watchMocksDir()
+	watchStaticMocksDir()
 
 	return createServer(onRequest).listen(config.port, config.host, function (error) {
 		if (error) {

package/src/StaticDispatcher.js

@@ -1,4 +1,4 @@
-import { join } from 'node:path'
+import { join, basename } from 'node:path'
 import { readFileSync } from 'node:fs'
 
 import { mimeFor } from './utils/mime.js'
@@ -37,14 +37,25 @@ let collection = {}
 export function initStaticCollection() {
 	collection = {}
 	listFilesRecursively(config.staticDir)
-		.filter(isFileAllowed)
 		.sort()
-		.forEach(f => registerStatic(f))
+		.forEach(registerStaticMock)
 }
 
-function registerStatic(file) {
+/** @returns {boolean} registered */
+export function registerStaticMock(file) {
+	if (!isFileAllowed(basename(file)))
+		return false
+
 	file = '/' + file
+	if (findStaticBrokerByRoute(file))
+		return false
+
 	collection[file] = new StaticBroker(file)
+	return true
+}
+
+export function unregisterStaticMock(file) {
+	delete collection['/' + file]
 }
 
 export function findStaticBrokerByRoute(route) {

package/src/Watcher.js

@@ -5,6 +5,7 @@ import { EventEmitter } from 'node:events'
 import { config } from './config.js'
 import { isFile } from './utils/fs.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
+import { registerStaticMock, unregisterStaticMock } from './StaticDispatcher.js'
 
 
 /** # AR = Add or Remove Mock Event */
@@ -39,5 +40,23 @@ export function watchMocksDir() {
 	})
 }
 
-// TODO staticDir, config changes
+export function watchStaticMocksDir() {
+	const dir = config.staticDir
+	if (!dir)
+		return
+	watch(dir, { recursive: true, persistent: false }, (_, file) => {
+		if (!file)
+			return
+		if (isFile(join(dir, file))) {
+			if (registerStaticMock(file))
+				uiSyncVersion.increment()
+		}
+		else {
+			unregisterStaticMock(file)
+			uiSyncVersion.increment()
+		}
+	})
+}
+
+// TODO config changes
 // TODO think about throttling e.g. bulk deletes/remove files